import { Star } from "lucide-react";

// Estrellas de solo lectura. El relleno parcial (ej. 4.5) se dibuja
// recortando una capa de estrellas llenas encima de las vacias. amber-600
// (no 400): contraste ~3.2:1 sobre blanco, minimo WCAG 1.4.11 para un
// grafico informativo (amber-400 daba 1.7:1, reportado por frontend-critic).
export function StarRating({ value, size = "sm", className = "" }: { value: number; size?: "sm" | "md" | "lg"; className?: string }) {
  const px = size === "lg" ? "size-6" : size === "md" ? "size-5" : "size-4";
  const pct = Math.max(0, Math.min(100, (value / 5) * 100));
  return (
    <span className={`relative inline-flex ${className}`} role="img" aria-label={`${value.toLocaleString("es-CO")} de 5 estrellas`}>
      <span className="flex text-slate-300">{[0, 1, 2, 3, 4].map((i) => <Star key={i} className={`${px} fill-current`} />)}</span>
      <span className="absolute inset-0 flex overflow-hidden text-amber-600" style={{ width: `${pct}%` }}>
        {[0, 1, 2, 3, 4].map((i) => <Star key={i} className={`${px} shrink-0 fill-current`} />)}
      </span>
    </span>
  );
}