'use client';

interface Props {
  averageRating: number | null;
  reviewCount: number;
  href?: string;
  size?: 'sm' | 'md';
}

export function RatingBadge({ averageRating, reviewCount, href, size = 'md' }: Props) {
  if (reviewCount === 0 || averageRating === null) {
    return null;
  }
  const formatted = averageRating.toFixed(1);
  const sizeClasses = size === 'sm' ? 'text-xs' : 'text-sm';
  const content = (
    <span
      className={`inline-flex items-center gap-1 ${sizeClasses}`}
      data-testid="rating-badge"
    >
      <span className="text-amber-500" aria-hidden>
        ★
      </span>
      <span className="font-medium text-slate-900">{formatted}</span>
      <span className="text-slate-500">
        ({reviewCount.toLocaleString()} review{reviewCount === 1 ? '' : 's'})
      </span>
    </span>
  );
  if (href) {
    return (
      <a href={href} className="hover:underline">
        {content}
      </a>
    );
  }
  return content;
}