'use client';

/**
 * DealReviews — stateless reviews section.
 * Receives deal.reviews; owns no state.
 */

import { ReviewCard } from '@/components/ui/domain/ReviewCard';
import { useT } from '@/lib/i18n/react';

interface Review {
  id: string;
  reviewerName: string | null;
  rating: number | null;
  body: string | null;
  createdAt: string;
  vendorReply: string | null;
}

export interface DealReviewsProps {
  reviews: Review[];
}

export function DealReviews({ reviews }: DealReviewsProps) {
  const t = useT('deal_detail');

  return (
    <section data-testid="deal-review-section" aria-labelledby="v5-reviews-heading">
      <h2
        id="v5-reviews-heading"
        className="text-text-primary mb-4 text-2xl font-[var(--font-weight-extrabold)]"
      >
        {t('reviews_heading')}
      </h2>
      {reviews.length > 0 ? (
        <div className="flex flex-col gap-3">
          {reviews.map((review) => (
            <ReviewCard
              key={review.id}
              reviewerName={review.reviewerName ?? t('anonymous_reviewer')}
              rating={review.rating ?? 0}
              body={review.body ?? ''}
              date={review.createdAt}
              vendorReply={review.vendorReply ?? undefined}
            />
          ))}
        </div>
      ) : (
        <p className="text-text-muted text-base">{t('reviews_empty')}</p>
      )}
    </section>
  );
}