// Placeholder reviews so the product page doesn't look empty. Swap this out for
// real review data (its own Prisma model, or a reviews API) once you're ready.
const SAMPLE_REVIEWS = [
  {
    name: 'Priya S.',
    rating: 5,
    body: 'The print came out exactly how I designed it. Fabric feels heavier than I expected in a good way.',
  },
  {
    name: 'Marcus T.',
    rating: 5,
    body: "Uploaded my own logo and it lined up perfectly. Shipping was faster than the estimate too.",
  },
  {
    name: 'Aisha K.',
    rating: 4,
    body: 'Great quality overall. Wish there were a couple more color options for this one.',
  },
];

function Stars({ rating }: { rating: number }) {
  return (
    <span aria-label={`${rating} out of 5 stars`} className="text-splash-orange">
      {'★'.repeat(rating)}
      <span className="text-line">{'★'.repeat(5 - rating)}</span>
    </span>
  );
}

export default function Reviews() {
  const average =
    Math.round((SAMPLE_REVIEWS.reduce((s, r) => s + r.rating, 0) / SAMPLE_REVIEWS.length) * 10) / 10;

  return (
    <div>
      <div className="flex items-baseline gap-4">
        <h2 className="font-display text-3xl">Reviews</h2>
        <div className="flex items-center gap-2">
          <Stars rating={Math.round(average)} />
          <span className="text-sm text-muted">
            {average} · {SAMPLE_REVIEWS.length} reviews
          </span>
        </div>
      </div>

      <div className="mt-8 grid gap-6 sm:grid-cols-3">
        {SAMPLE_REVIEWS.map((r) => (
          <div key={r.name} className="border border-line bg-surface p-5">
            <Stars rating={r.rating} />
            <p className="mt-3 text-sm text-ink">{r.body}</p>
            <p className="tag-label mt-4">{r.name}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
