import Styles from "@/constants/Styles";
import { View } from "react-native";
import { PieChart } from "react-native-gifted-charts";
import { useTheme } from "@/providers/ThemeProvider";
import Text from "../Text";

export default function ReportChartProgress({ data }: { data: { color: string; text: string; value: number; }[] }) {
   const { colors } = useTheme();
   const pieData = [
      { value: 54, text: "54%", color: '#177AD5' },
      { value: 40, text: "40%", color: '#92cc76' },
      { value: 20, text: "20%", color: '#ED6665' },
      { value: 0, text: "0%", color: '#fac858' },
   ];

   return (
      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
         <Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
         <PieChart
            data={data}
            showText
            showValuesAsTooltipText
            textColor={colors.text}
            radius={120}
            textSize={15}
            focusOnPress={false}
            showValuesAsLabels
            showTextBackground={false}
            textBackgroundRadius={0}
            isAnimated
         />
      </View>
   )
}