'use client';

interface ReviewAnchorProps {
  ratingAverage: number | null;
  reviewTotal: number;
}

export default function ReviewAnchor({ ratingAverage, reviewTotal }: ReviewAnchorProps) {
  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    // Clear and re-set hash to ensure hashchange fires even if already #reviews
    window.location.hash = '';
    requestAnimationFrame(() => {
      window.location.hash = '#reviews';
    });
  };

  return (
    <a
      href="#reviews"
      onClick={handleClick}
      className="flex items-center gap-2 mb-4 group w-fit"
    >
      <div className="flex">
        {[1, 2, 3, 4, 5].map((star) => (
          <svg
            key={star}
            className={`w-5 h-5 ${
              star <= Math.round(ratingAverage ?? 0)
                ? 'text-yellow-400'
                : 'text-surface-200'
            }`}
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
          </svg>
        ))}
      </div>
      {ratingAverage && (
        <span className="text-sm text-surface-500">{ratingAverage.toFixed(1)}</span>
      )}
      <span className="text-sm text-surface-400 group-hover:text-brand-500 transition-colors">
        ({reviewTotal} review{reviewTotal !== 1 ? 's' : ''})
      </span>
    </a>
  );
}