cally/components/pages/todos/ProgressCard.tsx

import { Text, View } from "react-native-ui-lib";
import React from "react";
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
import { useAuthContext } from "@/contexts/AuthContext";

export const transformNumber = (value: number, progressLimit: number) => {
    return Math.floor((value / progressLimit) * 100);
}

const PROGRESS_LIMIT = 1000;

const ProgressCard = ({children}: { children?: React.ReactNode }) => {
    const { profileData } = useAuthContext();

    const weeklyPoints = profileData?.weeklyPoints ?? 0;
    const transformedWeeklyPoints = transformNumber(weeklyPoints, PROGRESS_LIMIT);

    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 {weeklyPoints} points this week!{" "}
                </Text>
            </View>
            <ProgressBar
                progress={transformedWeeklyPoints}
                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'}}>{PROGRESS_LIMIT}</Text>
            </View>
            <View centerV centerH>
                {children}
            </View>
        </View>
    );
};

export default ProgressCard;