const STAR_PATH =
  "M10 1.5l2.47 5.27 5.66.6-4.24 3.9 1.15 5.6L10 14.9l-5.04 2.97 1.15-5.6-4.24-3.9 5.66-.6z";

/**
 * Reine Anzeige-Sternebewertung als SVG statt Unicode-Glyphen (★/☆) — die
 * rendern je nach Betriebssystem/Schriftart sichtbar unterschiedlich breit
 * und krumm. Nicht fuer die interaktive Bewertungsabgabe gedacht (dort bleibt
 * der bestehende peer-checked-Radio-Trick, der einen echten Formularwert
 * braucht).
 */
export function StarRating({
  value,
  size = 14,
  className = "",
}: {
  value: number;
  size?: number;
  className?: string;
}) {
  const rounded = Math.round(value);
  return (
    <span className={`inline-flex items-center gap-0.5 ${className}`} aria-hidden="true">
      {Array.from({ length: 5 }, (_, i) => (
        <svg
          key={i}
          width={size}
          height={size}
          viewBox="0 0 20 20"
          fill={i < rounded ? "currentColor" : "none"}
          stroke="currentColor"
          strokeWidth="1.2"
          strokeLinejoin="round"
          className={i < rounded ? "text-honey" : "text-honey/30"}
        >
          <path d={STAR_PATH} />
        </svg>
      ))}
    </span>
  );
}