import type { Review } from "@/data/types";
import { formatDate } from "@/lib/format";
import { StarRating } from "@/components/ui/StarRating";

/** Customer reviews list for a product. */
export function ReviewsList({ reviews }: { reviews: Review[] }) {
  if (reviews.length === 0) {
    return (
      <p className="text-sm text-muted">No reviews yet for this product.</p>
    );
  }

  return (
    <ul className="space-y-5">
      {reviews.map((review) => (
        <li
          key={review.id}
          className="rounded-2xl border border-border bg-card p-5"
        >
          <div className="flex flex-wrap items-center justify-between gap-2">
            <div>
              <p className="font-medium">{review.author}</p>
              <p className="text-xs text-muted">{formatDate(review.date)}</p>
            </div>
            <StarRating rating={review.rating} />
          </div>
          <h3 className="mt-3 text-sm font-semibold">{review.title}</h3>
          <p className="mt-1 text-sm leading-relaxed text-muted">{review.body}</p>
        </li>
      ))}
    </ul>
  );
}