import {Text, View} from "react-native-ui-lib";
import React from "react";
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;