"use client";

import { useState } from "react";

interface StarRatingProps {
  value: number;
  onChange?: (rating: number) => void;
  disabled?: boolean;
  size?: "sm" | "md" | "lg";
  showValue?: boolean;
}

const sizeClasses = {
  sm: "text-lg sm:text-xl",
  md: "text-2xl sm:text-3xl",
  lg: "text-4xl",
};

export default function StarRating({
  value,
  onChange,
  disabled = false,
  size = "md",
  showValue = false,
}: StarRatingProps) {
  const [hoverValue, setHoverValue] = useState(0);

  const handleClick = (rating: number) => {
    if (!disabled && onChange) {
      onChange(rating);
    }
  };

  const displayValue = hoverValue || value;

  return (
    <div className="flex flex-col items-center gap-2">
      <div className="flex items-center justify-center gap-2">
        {[1, 2, 3, 4, 5].map((star) => (
          <button
            key={star}
            type="button"
            onClick={() => handleClick(star)}
            disabled={disabled}
            onMouseEnter={() => !disabled && setHoverValue(star)}
            onMouseLeave={() => !disabled && setHoverValue(0)}
            className={`transition-transform hover:scale-110 disabled:hover:scale-100 disabled:cursor-not-allowed ${
              star <= displayValue
                ? "text-pixel-gold"
                : "text-gray-600 hover:text-gray-500"
            } ${sizeClasses[size]}`}
            aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
          >
            ★
          </button>
        ))}
      </div>
      {showValue && value > 0 && (
        <p className="text-gray-500 text-xs text-center">
          {value}/5
        </p>
      )}
    </div>
  );
}