Compact grid

import { Avatar, AvatarFallback, Badge, Button, Card, CardContent } from "@cronus-ui/ui";
import { Star, StarHalf } from "lucide-react";

function ReviewStars({ rating, label }: { rating: number; label: string }) {
  return (
    <span className="flex items-center gap-0.5" role="img" aria-label={label}>
      {[1, 2, 3, 4, 5].map((star) => {
        if (star <= rating) {
          return (
            <Star key={star} className="size-3.5 fill-warning text-warning" aria-hidden="true" />
          );
        }
        if (star - rating <= 0.5) {
          return (
            <StarHalf
              key={star}
              className="size-3.5 fill-warning text-warning"
              aria-hidden="true"
            />
          );
        }
        return <Star key={star} className="size-3.5 text-fg-tertiary" aria-hidden="true" />;
      })}
    </span>
  );
}

interface CompactReview {
  id: string;
  name: string;
  initials: string;
  date: string;
  rating: number;
  ratingLabel: string;
  body: string;
}

const compactReviews: CompactReview[] = [
  {
    id: "sofia",
    name: "Sofia Almeida",
    initials: "SA",
    date: "Jul 2, 2026",
    rating: 5,
    ratingLabel: "Rated 5 out of 5 stars",
    body: "The ANC is unreal on flights. Battery lasts my whole work week.",
  },
  {
    id: "marcus",
    name: "Marcus Chen",
    initials: "MC",
    date: "Jun 27, 2026",
    rating: 5,
    ratingLabel: "Rated 5 out of 5 stars",
    body: "Warmer sound than pairs twice the price. Multipoint just works.",
  },
  {
    id: "priya",
    name: "Priya Nair",
    initials: "PN",
    date: "Jun 19, 2026",
    rating: 4,
    ratingLabel: "Rated 4 out of 5 stars",
    body: "Stunning sound stage. Fit was snug at first but broke in nicely.",
  },
  {
    id: "jonas",
    name: "Jonas Weber",
    initials: "JW",
    date: "Jun 14, 2026",
    rating: 5,
    ratingLabel: "Rated 5 out of 5 stars",
    body: "Best purchase this year. The travel case alone feels premium.",
  },
  {
    id: "amara",
    name: "Amara Diallo",
    initials: "AD",
    date: "Jun 8, 2026",
    rating: 5,
    ratingLabel: "Rated 5 out of 5 stars",
    body: "Calls are crystal clear even on a windy commute. Zero regrets.",
  },
  {
    id: "leo",
    name: "Leo Tanaka",
    initials: "LT",
    date: "May 31, 2026",
    rating: 4,
    ratingLabel: "Rated 4 out of 5 stars",
    body: "Fantastic for focus work. Wish the earcups folded a bit flatter.",
  },
];

export function ReviewsCompactBlock() {
  return (
    <section aria-label="Customer reviews" className="flex w-full flex-col gap-6">
      <header className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap items-center gap-3">
          <h2 className="font-display text-2xl font-semibold text-fg">Loved by listeners</h2>
          <Badge variant="secondary">4.8 · 1,284 reviews</Badge>
        </div>
        <Button variant="outline" size="sm">
          Write a review
        </Button>
      </header>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {compactReviews.map((review) => (
          <Card key={review.id} className="gap-0 shadow-sm">
            <CardContent className="flex h-full flex-col gap-3">
              <ReviewStars rating={review.rating} label={review.ratingLabel} />
              <p className="flex-1 text-sm leading-relaxed text-fg-secondary">{review.body}</p>
              <div className="flex items-center gap-2.5">
                <Avatar className="size-8">
                  <AvatarFallback className="text-xs">{review.initials}</AvatarFallback>
                </Avatar>
                <div className="flex flex-col">
                  <span className="text-sm font-medium text-fg">{review.name}</span>
                  <span className="text-xs text-fg-tertiary">{review.date}</span>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}