import { Star } from "lucide-react";

export type EventRatingsSummary = {
  average: number;
  count: number;
};

export function EventRatingBadge({ ratings }: { ratings: EventRatingsSummary | null | undefined }) {
  const count = ratings?.count ?? 0;
  const average = ratings?.average ?? 0;
  if (!count || count <= 0 || !Number.isFinite(average) || average <= 0) return null;

  const full = Math.floor(average);
  const hasHalf = average % 1 >= 0.4;

  return (
    <>
      <div className="flex gap-0.5" aria-hidden>
        {[1, 2, 3, 4, 5].map((i) => {
          const filled = i <= full || (i === full + 1 && hasHalf);
          return (
            <Star
              key={i}
              className={`size-3 ${filled ? "fill-amber-400 text-amber-400" : "text-[#c7c7cc]"}`}
              strokeWidth={filled ? 0 : 1.75}
            />
          );
        })}
      </div>
      <span className="text-[var(--theme-card-text-color)]/60">
        {average.toFixed(1)} ({count})
      </span>
    </>
  );
}