import React, { useState } from 'react';
import { FaFire } from 'react-icons/fa';

function FlameRatingInput({ value, onChange }) {
  const [hoverValue, setHoverValue] = useState(0);

  const handleMouseEnter = (rating) => {
    setHoverValue(rating);
  };

  const handleMouseLeave = () => {
    setHoverValue(0);
  };

  const handleClick = (rating) => {
    onChange(rating);
  };

  return (
    <div className="flex items-center" onMouseLeave={handleMouseLeave}>
      {[...Array(10)].map((_, index) => {
        const rating = index + 1;
        const isFilled = rating <= (hoverValue || value); // Use hoverValue if > 0, otherwise use actual value

        return (
          <FaFire
            key={rating}
            className={`flame-rating-icon w-5 h-5 ${isFilled ? 'filled' : ''}`}
            onMouseEnter={() => handleMouseEnter(rating)}
            onClick={() => handleClick(rating)}
          />
        );
      })}
    </div>
  );
}

export default FlameRatingInput;
