linkder/apps/web/src/components/pro/review-list.tsx

'use client';

import { Star } from 'lucide-react';
import { api } from '@/lib/trpc';
import { Button, EmptyState } from '@/components/ui';
import { cn, formatRelativeTime } from '@/lib/utils';

/**
 * Five stars, filled to the rating.
 *
 * The number goes in the accessible name rather than being inferred from a row
 * of glyphs — §8, meaning is never carried by shape alone. The stars themselves
 * are decorative once the label says "4 out of 5".
 */
function Stars({ rating, className }: { rating: number; className?: string }) {
  return (
    <span
      className={cn('flex items-center gap-0.5 text-sun-500', className)}
      role="img"
      aria-label={`${rating} out of 5`}
    >
      {[1, 2, 3, 4, 5].map((n) => (
        <Star
          key={n}
          className={cn('h-3.5 w-3.5', n <= rating ? 'fill-current' : 'text-faint')}
          aria-hidden
        />
      ))}
    </span>
  );
}

/**
 * What people wrote about this pro.
 *
 * A page, never the whole history: `ratingCount` in the header counts every
 * rating this pro has ever had, and a profile with sixty of them would push the
 * hire button somewhere nobody scrolls. The heading says which it is showing so
 * the two numbers cannot be read as a contradiction.
 *
 * Only published reviews exist as far as this is concerned — `pro.reviews`
 * enforces that server-side, because the publication gate is what stops a pro
 * retaliating against a bad review before it is visible.
 */
export function ReviewList({ proId, ratingCount }: { proId: string; ratingCount: number }) {
  const reviews = api.pro.reviews.useInfiniteQuery(
    { proId },
    { getNextPageParam: (last) => last.nextCursor, staleTime: 60_000, retry: false },
  );

  const rows = reviews.data?.pages.flatMap((page) => page.reviews) ?? [];

  if (reviews.isLoading) {
    return (
      <div className="flex flex-col gap-3" aria-busy>
        {/* §6.11 — three is enough to say "loading"; twenty is a lie about what
            is coming. */}
        {[0, 1, 2].map((n) => (
          <div key={n} className="h-24 animate-pulse rounded-card bg-inset" />
        ))}
      </div>
    );
  }

  if (rows.length === 0) {
    return (
      <EmptyState
        title="No written reviews yet"
        body={
          ratingCount > 0
            ? 'This pro has been rated, but nobody has left written feedback that is public yet.'
            : 'Nobody has reviewed this pro yet. Reviews appear once a booking is finished.'
        }
      />
    );
  }

  return (
    <div className="flex flex-col gap-3">
      <ul className="flex flex-col gap-3">
        {rows.map((review) => (
          <li
            key={review.id}
            className="rounded-card border border-hairline bg-raised p-4"
          >
            <div className="flex items-center gap-3">
              {review.authorImage ? (
                // eslint-disable-next-line @next/next/no-img-element -- remote avatar, no loader configured
                <img
                  src={review.authorImage}
                  alt=""
                  className="h-9 w-9 shrink-0 rounded-pill object-cover"
                  loading="lazy"
                />
              ) : (
                <span
                  aria-hidden
                  className="flex h-9 w-9 shrink-0 items-center justify-center rounded-pill bg-inset font-display text-body-sm text-muted"
                >
                  {review.authorName?.[0] ?? '?'}
                </span>
              )}

              <span className="min-w-0 flex-1">
                <span className="block truncate text-body-sm font-semibold text-strong">
                  {review.authorName ?? 'A customer'}
                </span>
                <span className="mt-0.5 flex items-center gap-2">
                  <Stars rating={review.rating} />
                  <span className="text-meta text-faint">
                    {formatRelativeTime(review.publishedAt)}
                  </span>
                </span>
              </span>
            </div>

            <p className="mt-3 text-body-sm text-strong">{review.body}</p>
          </li>
        ))}
      </ul>

      {reviews.hasNextPage && (
        <Button
          variant="ghost"
          size="md"
          block
          busy={reviews.isFetchingNextPage}
          onClick={() => void reviews.fetchNextPage()}
        >
          Show more reviews
        </Button>
      )}
    </div>
  );
}