import React from 'react';
import { View, StyleSheet } from 'react-native';
import CircularProgressBar from 'react-native-sumit-circular-progress';

export default function App() {
  return (
    <View style={styles.container}>
      {/* Basic usage */}
      <CircularProgressBar progress={75} />
      
      {/* Custom styling */}
      <CircularProgressBar 
        size={200}
        strokeWidth={10}
        progress={65}
        backgroundColor="#e0e0e0"
        progressColor="#ff0000"
        textColor="#333"
      />
      
      {/* With value display */}
      <CircularProgressBar 
        currentValue={750}
        maxValue={1000}
        showValue={true}
        showPercentage={false}
      />
      
      {/* Custom format */}
      <CircularProgressBar 
        currentValue={42}
        maxValue={100}
        formatValue={(current, max) => `${current} of ${max}`}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20,
  },
});