import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons";
import Text from "./Text";
import { View } from "react-native";
import ProgressBar from "./progressBar";

type Props = {
   text: string,
   progress: number
}

export default function SectionProgress({ text, progress }: Props) {
   const { colors } = useTheme();

   return (
      <View style={[Styles.p15, { flexDirection: 'row', borderRadius: 10, alignItems: 'center', backgroundColor: colors.card }]}>
         <View style={[Styles.iconContent, { alignItems: 'center', justifyContent: 'center', backgroundColor: colors.primary }]}>
            <AntDesign name="areachart" size={30} color={'#384288'} />
         </View>
         <View style={[Styles.ml10, { flex: 1 }]}>
            <Text style={[Styles.mb05]}>{text}</Text>
            <ProgressBar margin={0} category="page" value={progress} />
         </View>
      </View>
   )
}