import { useState } from 'react'

interface Props {
  onRate: (rating: number) => void
  rating?: number | null
  readonly?: boolean
  size?: 'sm' | 'md' | 'lg'
}

export function RatingStars({ onRate, rating, readonly = false, size = 'md' }: Props) {
  const [hover, setHover] = useState(0)

  const sizeClasses = {
    sm: 'text-lg',
    md: 'text-2xl',
    lg: 'text-3xl',
  }

  return (
    <div className="flex gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
        <button
          key={star}
          type="button"
          disabled={readonly}
          onClick={() => onRate(star)}
          onMouseEnter={() => !readonly && setHover(star)}
          onMouseLeave={() => !readonly && setHover(0)}
          className={`${sizeClasses[size]} transition-all duration-150 ${
            readonly ? 'cursor-default' : 'cursor-pointer hover:scale-110'
          } ${
            star <= (hover || rating || 0)
              ? 'text-cellar-gold'
              : 'text-cellar-border'
          }`}
        >
          ★
        </button>
      ))}
    </div>
  )
}
