---
// Herzen statt Sterne für Kundenbewertungen — passend zum Marken-Herz 🩵 und dem
// Lila-Babyblau-Verlauf, der schon überall auf der Seite als Signature-Look verwendet wird
// (Verlaufsränder der Karten, Sprach-Umschalter, Story-Boxen). Volle Herzen: Verlaufsfüllung,
// halbe Herzen: Verlaufsfüllung bei halber Deckkraft, leere Herzen: nur Umriss.
interface Props {
  bewertung: number; // 0–5, Nachkommastellen erlaubt (z.B. 4.5)
  size?: number;
  showValue?: boolean;
  anzahl?: number;
  anzahlLabel?: string; // z.B. "(12)" oder "12 Bewertungen" — fertig formatiert übergeben
}

const { bewertung, size = 16, showValue = false, anzahl, anzahlLabel } = Astro.props;
const gradId = `hr-${Math.random().toString(36).slice(2, 9)}`;

const herzen = Array.from({ length: 5 }, (_, i) => {
  const diff = bewertung - i;
  if (diff >= 0.75) return "full";
  if (diff >= 0.25) return "half";
  return "empty";
});

const HERZ_PFAD =
  "M12 21s-7.5-4.9-10.2-9.3C.2 8.7 1.4 5 5 4.1c2.1-.5 4 1.4 5 2.9.6-.9 1.3-1.7 2.2-2.2 1.9-1.1 4.4-.7 5.8 1 1.9 2.3 1.5 5.6-.6 8.6C14.9 17.5 12 21 12 21z";
---

<span class="heart-rating" role="img" aria-label={`${bewertung.toFixed(1)} von 5 Herzen${anzahlLabel ? `, ${anzahlLabel}` : ""}`}>
  <svg width="0" height="0" style="position:absolute;" aria-hidden="true">
    <defs>
      {/* Lila → Babyblau als echte Mischung beider Marken-Farben: oben links das Violett
          (--c-purple-glow), unten rechts das Babyblau (--c-accent), dazwischen ein weicher
          Zwischenton, damit der Verlauf im kleinen Herz-Format nicht hart umschlägt, sondern
          wirklich wie eine Mischung wirkt. */}
      <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="var(--c-purple-glow)"></stop>
        <stop offset="55%" stop-color="#8aa8e6"></stop>
        <stop offset="100%" stop-color="var(--c-accent)"></stop>
      </linearGradient>
    </defs>
  </svg>
  <span class="heart-icons" aria-hidden="true">
    {herzen.map((zustand) => (
      <svg
        class={`heart-icon heart-${zustand}`}
        width={size}
        height={size}
        viewBox="0 0 24 24"
      >
        <path
          d={HERZ_PFAD}
          fill={zustand === "empty" ? "none" : `url(#${gradId})`}
          fill-opacity={zustand === "half" ? "0.5" : "1"}
          stroke={zustand === "empty" ? "var(--c-text-muted)" : `url(#${gradId})`}
          stroke-width="1.4"
          stroke-linejoin="round"
        ></path>
      </svg>
    ))}
  </span>
  {showValue && <span class="heart-value">{bewertung.toFixed(1)}</span>}
  {anzahlLabel && <span class="heart-count small">{anzahlLabel}</span>}
</span>

<style>
  .heart-rating { display: inline-flex; align-items: center; gap: 0.4em; }
  .heart-icons { display: inline-flex; gap: 0.15em; }
  .heart-icon { display: block; flex-shrink: 0; }
  .heart-value { font-weight: 700; color: var(--c-text); font-size: 0.92em; }
  .heart-count { color: var(--c-text-muted); }
</style>
