"use client"

import { useState } from "react"
import { Star } from "lucide-react"

type Props = {
  value?: number
  onChange?: (value: number) => void
  size?: number
  readOnly?: boolean
}

export function Stars({ value = 0, onChange, size = 22, readOnly }: Props) {
  const [hovered, setHovered] = useState<number | null>(null)
  const display = hovered ?? value

  return (
    <div className="inline-flex items-center" role="radiogroup" aria-label="Rating">
      {[0, 1, 2, 3, 4].map((i) => {
        const active = display >= i + 1
        return (
          <button
            key={i}
            type="button"
            className="p-0.5"
            aria-checked={active}
            role="radio"
            disabled={readOnly}
            onMouseEnter={() => !readOnly && setHovered(i + 1)}
            onMouseLeave={() => !readOnly && setHovered(null)}
            onClick={() => !readOnly && onChange?.(i + 1)}
         >
            <Star
              className={active ? "text-yellow-500 fill-yellow-400" : "text-gray-300"}
              style={{ width: size, height: size }}
            />
          </button>
        )
      })}
    </div>
  )
}