import { useColor } from "@/hooks/useColor";
import { View } from "react-native";

type ProgressBarProps = {
  value: number; // 0 to 100
};

const ProgressBar = ({ value }: ProgressBarProps) => {
  const progress = Math.max(0, Math.min(100, value));
  const { primary } = useColor();

  return (
    <View
      className="w-full dark:bg-white/5 rounded-full h-2.5"
      style={{
        backgroundColor: primary[10],
      }}
    >
      <View
        className=" h-2.5 rounded-full transition-[width] duration-500 ease-out"
        style={{ width: `${progress}%`, backgroundColor: primary.base }}
      />
    </View>
  );
};

export default ProgressBar;
