"use client";

import { useState } from "react";

function StarIcon({ filled, onMouseEnter, onClick }: { filled: boolean; onMouseEnter: () => void; onClick: () => void }) {
    return (
        <button
            type="button"
            onMouseEnter={onMouseEnter}
            onClick={onClick}
            className={`relative rounded-sm outline-none focus:ring-2 focus:ring-[var(--accent)] focus:ring-offset-2 p-0.5 text-[var(--warm)] transition-opacity ${!filled && "opacity-40"}`}
        >
            <svg className="size-6" viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5" aria-hidden>
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
            </svg>
        </button>
    );
}

export function StarRatingInput({ value, onChange }: { value: number; onChange: (v: number) => void }) {
    const [hoverValue, setHoverValue] = useState(0);

    return (
        <div
            className="flex items-center gap-1"
            onMouseLeave={() => setHoverValue(0)}
        >
            {[1, 2, 3, 4, 5].map((star) => (
                <StarIcon
                    key={star}
                    filled={star <= (hoverValue || value)}
                    onMouseEnter={() => setHoverValue(star)}
                    onClick={() => onChange(star)}
                />
            ))}
        </div>
    );
}
