import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";

interface CapacityProgressBarProps {
  nbInscrits: number;
  capaciteMax: number;
}

export default function CapacityProgressBar({
  nbInscrits,
  capaciteMax,
}: CapacityProgressBarProps) {
  const percentage = capaciteMax > 0 ? Math.round((nbInscrits / capaciteMax) * 100) : 0;

  // Déterminer la couleur selon le taux de remplissage
  const getColor = () => {
    if (percentage < 70) return "bg-green-500";
    if (percentage < 90) return "bg-orange-500";
    return "bg-red-500";
  };

  // Déterminer la couleur du texte selon le taux de remplissage
  const getTextColor = () => {
    if (percentage < 70) return "text-green-600";
    if (percentage < 90) return "text-orange-600";
    return "text-red-600";
  };

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between gap-4">
        <span className="text-sm font-medium whitespace-nowrap">
          {nbInscrits} / {capaciteMax}
        </span>
        <span className={cn("text-sm font-semibold whitespace-nowrap", getTextColor())}>
          {percentage}%
        </span>
      </div>
      <Progress
        value={percentage}
        className="h-2"
        indicatorClassName={cn("transition-all", getColor())}
      />
    </div>
  );
}