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";

const ProgressCard = () => {
  const { maxPoints } = useToDosContext();
  return (
    <View
      backgroundColor="white"
      marginH-25
      marginB-30
      padding-15
      style={{ borderRadius: 22 }}
    >
      <View row centerV>
        <Fontisto name="day-sunny" size={30} color="#ff9900" />
        <Text marginL-5 text70>
          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 color={"#868686"}>0</Text>
        <Text color={"#868686"}>{maxPoints}</Text>
      </View>
      <View centerV centerH>
        <Button backgroundColor="transparent">
          <Text style={{ textDecorationLine: "underline", color: "#05a8b6" }}>
            View your full progress report here
          </Text>
        </Button>
      </View>
    </View>
  );
};

export default ProgressCard;