type ReviewData = {
  id: string;
  rating: number;
  title: string | null;
  body: string | null;
  isVerifiedPurchase: boolean;
  createdAt: Date;
  user: { firstName: string | null; lastName: string | null };
};

export default function ReviewList({ reviews }: { reviews: ReviewData[] }) {
  if (reviews.length === 0) {
    return (
      <p className="text-sm text-ink/50">
        No reviews yet — be the first to share your experience.
      </p>
    );
  }

  return (
    <div className="flex flex-col gap-6">
      {reviews.map((review) => (
        <div key={review.id} className="border-b border-line pb-5">
          <div className="flex items-center gap-2 mb-1.5">
            <span className="text-gold font-mono text-sm">
              {"★".repeat(review.rating)}
              {"☆".repeat(5 - review.rating)}
            </span>
            {review.isVerifiedPurchase && (
              <span className="text-[10px] font-mono uppercase bg-green-100 text-green-700 px-1.5 py-0.5 rounded">
                Verified Purchase
              </span>
            )}
          </div>
          <p className="text-sm font-medium text-ink mb-1">
            {review.user.firstName ?? "Anonymous"} {review.user.lastName?.[0] ?? ""}
          </p>
          {review.title && <p className="text-sm font-medium text-ink mb-1">{review.title}</p>}
          {review.body && <p className="text-sm text-ink/70">{review.body}</p>}
          <p className="text-xs text-ink/40 font-mono mt-1.5">
            {new Date(review.createdAt).toLocaleDateString("en-KE", {
              day: "numeric", month: "short", year: "numeric",
            })}
          </p>
        </div>
      ))}
    </div>
  );
}