"use client";

import { useState } from "react";
import { Star } from "lucide-react";
import { RATING_SCORE_LABELS } from "@/types/rating";
import styles from "./RatingComponents.module.css";

interface Props {
  value: number;
  onChange: (value: number) => void;
  size?: number;
  showLabel?: boolean;
}

export default function RatingStarsPicker({ value, onChange, size = 40, showLabel = false }: Props) {
  const [hovered, setHovered] = useState(0);
  const stars = [1, 2, 3, 4, 5];
  const display = hovered || value;

  return (
    <div className={styles.starsPickerWithLabel}>
      <div
        className={styles.starsPicker}
        role="radiogroup"
        aria-label="Pilih rating bintang"
        onMouseLeave={() => setHovered(0)}
      >
        {stars.map((s) => (
          <button
            key={s}
            type="button"
            role="radio"
            aria-checked={value === s}
            aria-label={`${s} bintang — ${RATING_SCORE_LABELS[s]}`}
            className={styles.starBtn}
            onMouseEnter={() => setHovered(s)}
            onClick={() => onChange(s)}
          >
            <Star
              size={size}
              className={s <= display ? styles.starFilled : styles.starEmpty}
              fill={s <= display ? "currentColor" : "none"}
              aria-hidden
            />
          </button>
        ))}
      </div>
      {showLabel && (
        <span className={styles.starsPickerLabel}>
          {display > 0 ? RATING_SCORE_LABELS[display] : "Pilih rating"}
        </span>
      )}
    </div>
  );
}