Summary

import {
  Avatar,
  AvatarFallback,
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Progress,
} from "@cronus-ui/ui";
import { Star, StarHalf } from "lucide-react";
import { RATING_DISTRIBUTION, REVIEWS } from "../lib/demo-store.js";

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>
  );
}

// The rating histogram is the shared demo-store distribution; the top-review
// column is the first three reviewers (Sofia, Marcus, Priya) with their titles.
const ratingBars = RATING_DISTRIBUTION;
const topReviews = REVIEWS.slice(0, 3);

export function ReviewsSummaryBlock() {
  return (
    <section
      aria-label="Customer reviews"
      className="mx-auto grid w-full max-w-4xl gap-6 lg:grid-cols-[300px_1fr]"
    >
      {/* Aggregate rating */}
      <Card className="h-fit gap-0 shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Customer reviews</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-4 pt-2">
          <div className="flex items-end gap-3">
            <span className="font-display text-5xl font-semibold text-fg">4.8</span>
            <div className="flex flex-col gap-1 pb-1">
              <ReviewStars rating={4.8} label="4.8 out of 5 stars" />
              <span className="text-xs text-fg-tertiary">Based on 1,284 reviews</span>
            </div>
          </div>
          <div className="flex flex-col gap-2">
            {ratingBars.map((bar) => (
              <div key={bar.stars} className="flex items-center gap-3">
                <span className="w-3 text-sm text-fg-secondary">{bar.stars}</span>
                <Star className="size-3.5 fill-warning text-warning" aria-hidden="true" />
                <Progress value={bar.percent} aria-label={bar.label} className="flex-1" />
                <span className="w-9 text-end text-sm text-fg-tertiary">{bar.percent}%</span>
              </div>
            ))}
          </div>
          <Button variant="outline" className="w-full">
            Write a review
          </Button>
        </CardContent>
      </Card>

      {/* Top reviews */}
      <div className="flex flex-col gap-4">
        {topReviews.map((review) => (
          <Card key={review.id} className="gap-0 shadow-sm">
            <CardContent className="flex flex-col gap-3">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-3">
                  <Avatar>
                    <AvatarFallback>{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>
                {review.verified ? <Badge variant="success">Verified purchase</Badge> : null}
              </div>
              <div className="flex flex-col gap-1">
                <ReviewStars rating={review.rating} label={review.ratingLabel} />
                <span className="text-sm font-medium text-fg">{review.title}</span>
              </div>
              <p className="text-sm leading-relaxed text-fg-secondary">{review.body}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}