import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { Row } from '@/components/ui/layout/Row';
import { Stack } from '@/components/ui/layout/Stack';
import { Pill } from '@/components/ui/primitives/Pill';
import { formatDate } from '@/lib/format';
import { Card, SectionTitle } from './VendorDetail.shared';
import type { Locale } from '@/lib/i18n';
import type { VendorDetailData } from './VendorDetail.types';

interface VendorDetailReviewsSectionProps {
  vendor: VendorDetailData;
  locale: Locale;
  t: (key: string) => string;
}

export function VendorDetailReviewsSection({ vendor, locale, t }: VendorDetailReviewsSectionProps) {
  return (
    <div>
      <SectionTitle>{t('section_reviews')}</SectionTitle>
      <Card>
        {vendor.recentReviews.length === 0 ? (
          <EmptyState title={t('reviews_empty')} className="py-4" />
        ) : (
          <Stack gap="3" as="ul">
            {vendor.recentReviews.map((review) => (
              <li
                key={review.id}
                className="border-border-default border-b pb-3 last:border-0 last:pb-0"
              >
                <Row justify="between" align="start">
                  <Stack gap="1" className="min-w-0 flex-1">
                    {review.rating !== null && (
                      <p
                        className="text-sm"
                        aria-label={`${t('field_reviews_score')}: ${review.rating}/5`}
                      >
                        <span aria-hidden="true">{'⭐'.repeat(review.rating)}</span>
                        <span className="text-text-secondary ms-1 text-xs">
                          ({review.rating}/5)
                        </span>
                      </p>
                    )}
                    <p className="text-text-primary line-clamp-2 text-sm" data-user-displayname>
                      {review.body}
                    </p>
                    <Row gap="2">
                      <span className="text-text-secondary text-xs">
                        {formatDate(review.createdAt, locale)}
                      </span>
                      {!review.isVisible && (
                        <Pill tone="danger" size="sm">
                          {t('review_hidden')}
                        </Pill>
                      )}
                      {review.reviewType === 'TECHNICAL' && (
                        <Pill tone="neutral" size="sm">
                          {t('review_technical')}
                        </Pill>
                      )}
                    </Row>
                  </Stack>
                </Row>
              </li>
            ))}
          </Stack>
        )}
      </Card>
    </div>
  );
}