import { View } from "react-native";
import { PROGRESS_THRESHOLDS } from "@/lib/constants";

interface ProgressBarProps {
  percent: number;
}

function getBarColor(percent: number): string {
  if (percent >= PROGRESS_THRESHOLDS.danger) return "bg-red-500";
  if (percent >= PROGRESS_THRESHOLDS.warning) return "bg-yellow-400";
  return "bg-green-500";
}

export function ProgressBar({ percent }: ProgressBarProps) {
  const clamped = Math.max(0, Math.min(100, percent));
  return (
    <View className="h-2.5 w-full rounded-full bg-neutral-200 dark:bg-neutral-700">
      <View
        className={`h-2.5 rounded-full ${getBarColor(clamped)}`}
        style={{ width: `${clamped}%` }}
      />
    </View>
  );
}