import { View, Text, Button } from "react-native-ui-lib";
import React from "react";
import { Fontisto } from "@expo/vector-icons";
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
import { useToDosContext } from "@/contexts/ToDosContext";
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";

const ProgressCard = ({children}: {children?: React.ReactNode}) => {
  const { maxPoints } = useToDosContext();
  return (
    <View
      backgroundColor="white"
      marginB-5
      padding-15
      style={{ borderRadius: 22 }}
    >
      <View row centerV>
        <FireworksOrangeIcon />
        <Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
          You have earned XX points this week!{" "}
        </Text>
      </View>
      <ProgressBar
        progress={50}
        progressColor="#ea156c"
        style={{
          height: 21,
          backgroundColor: "#fcf2f6",
          marginTop: 15,
          marginBottom: 5,
        }}
      />
      <View row spread>
        <Text style={{fontSize: 13, color: '#858585'}}>0</Text>
        <Text style={{fontSize: 13, color: '#858585'}}>{maxPoints}</Text>
      </View>
      <View centerV centerH>
        {children}
      </View>
    </View>
  );
};

export default ProgressCard;