import { Star } from 'lucide-react';
import { useT } from '@/lib/i18n';

interface StarRatingProps {
  rating: number;
  total?: number;
  sizeClass?: string;
  gapClass?: string;
  className?: string;
  ariaLabel?: string;
}

const StarRating = ({
  rating,
  total = 5,
  sizeClass = 'w-4 h-4',
  gapClass = 'gap-0.5',
  className = '',
  ariaLabel,
}: StarRatingProps) => {
  const t = useT();
  const safe = Math.max(0, Math.min(total, Number.isFinite(rating) ? rating : 0));
  const pct = (safe / total) * 100;
  const insetRight = 100 - pct;

  return (
    <div
      className={`relative inline-flex ${gapClass} ${className}`}
      role="img"
      aria-label={ariaLabel ?? t(`Beoordeling: ${safe.toFixed(1)} van ${total}`, `Rating: ${safe.toFixed(1)} out of ${total}`)}
    >
      {Array.from({ length: total }).map((_, i) => (
        <Star key={`bg-${i}`} className={`${sizeClass} text-border`} aria-hidden="true" />
      ))}
      <div
        className={`absolute inset-0 inline-flex ${gapClass} pointer-events-none`}
        style={{ clipPath: `inset(0 ${insetRight}% 0 0)` }}
        aria-hidden="true"
      >
        {Array.from({ length: total }).map((_, i) => (
          <Star key={`fg-${i}`} className={`${sizeClass} fill-warning text-warning shrink-0`} />
        ))}
      </div>
    </div>
  );
};

export default StarRating;