import Styles from "@/constants/Styles";
import { useEffect, useState } from "react";
import { Animated, View } from "react-native";


type Props = {
   margin?: number
   value: number
}

export default function ProgressBar({ margin, value }: Props) {
   const [progress, setProgress] = useState(new Animated.Value(0));


   useEffect(() => {
      Animated.timing(progress, {
         // 100% = 255
         toValue: value / 100 * 255,
         duration: 1000,
         useNativeDriver: false
      }).start();
   }, []);

   return (
      <View style={[Styles.contentItemCenter]}>
         <View style={[Styles.wrapBar, { margin: margin && margin }]}>
            <Animated.View style={[Styles.contentBar, { width: progress }]} />
         </View>
      </View>
   )
}