export function SatisfactionTrendChart({ data }: { data: { month: string; avg: number; count: number }[] }) {
  if (data.length === 0) return null;
  const overallAvg = data.reduce((sum, d) => sum + d.avg * d.count, 0) / data.reduce((sum, d) => sum + d.count, 0);

  return (
    <div>
      <p className="text-xs text-[var(--rk-ink-muted)] mb-3">
        Durchschnitt über alle Bewertungen:{" "}
        <span className="text-amber-400">{overallAvg.toFixed(1)} ★</span>
      </p>
      <div className="flex items-end gap-1.5 h-32">
        {data.map((d) => (
          <div key={d.month} className="flex-1 flex flex-col items-center justify-end gap-1 group relative">
            <div
              className="w-full rounded-t bg-amber-400/70 group-hover:bg-amber-400 transition-colors min-h-[2px]"
              style={{ height: `${Math.max(2, (d.avg / 5) * 100)}%` }}
            />
            <div className="absolute -top-6 opacity-0 group-hover:opacity-100 transition-opacity text-[0.6rem] bg-[var(--rk-bg)] border border-white/15 rounded px-1.5 py-0.5 whitespace-nowrap pointer-events-none">
              {d.avg.toFixed(1)} ★ ({d.count})
            </div>
          </div>
        ))}
      </div>
      <div className="flex gap-1.5 mt-1.5">
        {data.map((d) => (
          <span key={d.month} className="flex-1 text-center text-[0.55rem] text-[var(--rk-ink-muted)] truncate">
            {d.month.slice(2)}
          </span>
        ))}
      </div>
    </div>
  );
}