import { cn } from '@/lib/utils';
import { Star } from 'lucide-react';
import { useState } from 'react';

/** 5 stars with half steps -> 1..10 score. */
export default function StarRating({ value, onChange, disabled, size = 'size-7' }: { value: number | null; onChange?: (score: number) => void; disabled?: boolean; size?: string }) {
    const [hover, setHover] = useState<number | null>(null);
    const shown = hover ?? value ?? 0;
    const interactive = !!onChange && !disabled;

    return (
        <div role={interactive ? 'radiogroup' : 'img'} aria-label={value ? `Rated ${value} out of 10` : 'Not rated'} className="inline-flex" onMouseLeave={() => setHover(null)}>
            {[1, 2, 3, 4, 5].map((star) => {
                const full = shown >= star * 2;
                const half = !full && shown >= star * 2 - 1;
                return (
                    <span key={star} className="relative inline-block">
                        <Star className={cn(size, 'text-muted-foreground/40')} />
                        <span className="absolute inset-0 overflow-hidden" style={{ width: full ? '100%' : half ? '50%' : '0%' }}>
                            <Star className={cn(size, 'fill-amber-400 text-amber-400')} />
                        </span>
                        {interactive && (
                            <>
                                <button type="button" role="radio" aria-checked={value === star * 2 - 1} aria-label={`${star * 2 - 1} out of 10`} className="absolute inset-y-0 left-0 w-1/2 cursor-pointer" onMouseEnter={() => setHover(star * 2 - 1)} onFocus={() => setHover(star * 2 - 1)} onBlur={() => setHover(null)} onClick={() => onChange(star * 2 - 1)} />
                                <button type="button" role="radio" aria-checked={value === star * 2} aria-label={`${star * 2} out of 10`} className="absolute inset-y-0 right-0 w-1/2 cursor-pointer" onMouseEnter={() => setHover(star * 2)} onFocus={() => setHover(star * 2)} onBlur={() => setHover(null)} onClick={() => onChange(star * 2)} />
                            </>
                        )}
                    </span>
                );
            })}
        </div>
    );
}