import { Star } from "lucide-react";

/** Renders a 5-star row with the last star partially filled to match a fractional score. */
export function StarRating({ score }: { score: number }) {
  const fillPercent = Math.max(0, Math.min(1, score - Math.floor(score))) * 100;
  const fullStars = Math.floor(score);

  return (
    <div className="flex text-amber-400">
      {[...Array(5)].map((_, i) => {
        if (i < fullStars) return <Star key={i} className="w-3.5 h-3.5 fill-current" />;
        if (i === fullStars && fillPercent > 0) {
          return (
            <span key={i} className="relative inline-block w-3.5 h-3.5">
              <Star className="absolute inset-0 w-3.5 h-3.5 text-slate-300 fill-current" />
              <span className="absolute inset-0 overflow-hidden" style={{ width: `${fillPercent}%` }}>
                <Star className="w-3.5 h-3.5 fill-current text-amber-400" />
              </span>
            </span>
          );
        }
        return <Star key={i} className="w-3.5 h-3.5 text-slate-300 fill-current" />;
      })}
    </div>
  );
}