"use client";
import { useState } from "react";

const FullStar = ({
  width,
  height,
}: {
  fillRating?: number;
  width: number;
  height: number;
}) => (
  <svg
    className="fill-current transition-colors duration-200"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 30 28"
    width={width}
    height={height}
    stroke="#4D4D4D"
  >
    <path d="M16.0846 0.703533L19.6247 7.73298C19.7264 7.93527 19.8763 8.10984 20.0614 8.24154C20.2464 8.37323 20.4611 8.45806 20.6867 8.48864L28.351 9.63093C28.6104 9.66696 28.8544 9.77463 29.0552 9.94166C29.256 10.1087 29.4055 10.3284 29.4867 10.5756C29.5679 10.8229 29.5775 11.0879 29.5144 11.3403C29.4513 11.5927 29.318 11.8225 29.1298 12.0034L23.5011 17.4512C23.3377 17.608 23.2152 17.8019 23.1442 18.0162C23.0733 18.2306 23.056 18.4589 23.094 18.6813L24.4215 26.3786C24.4654 26.6344 24.4362 26.8973 24.3372 27.1375C24.2382 27.3777 24.0733 27.5855 23.8614 27.7374C23.6494 27.8893 23.3988 27.9792 23.138 27.9968C22.8772 28.0144 22.6167 27.9591 22.386 27.8372L15.4297 24.1994C15.228 24.0933 15.0031 24.0378 14.7748 24.0378C14.5465 24.0378 14.3216 24.0933 14.1199 24.1994L7.16366 27.8372C6.93292 27.9591 6.67237 28.0144 6.41158 27.9968C6.15079 27.9792 5.9002 27.8893 5.68825 27.7374C5.47629 27.5855 5.31146 27.3777 5.21245 27.1375C5.11344 26.8973 5.08423 26.6344 5.12812 26.3786L6.45565 18.6813C6.49358 18.4589 6.47633 18.2306 6.40539 18.0162C6.33446 17.8019 6.21197 17.608 6.04854 17.4512L0.419829 12.0034C0.230309 11.819 0.0975063 11.585 0.0369345 11.3286C-0.0236373 11.0721 -0.00948242 10.8039 0.0777445 10.5551C0.164971 10.3064 0.321672 10.0874 0.529551 9.92374C0.737429 9.7601 0.987907 9.65854 1.25174 9.63093L9.0399 8.50621C9.26551 8.47563 9.48019 8.3908 9.66527 8.25911C9.85036 8.12742 10.0002 7.95284 10.1019 7.75055L13.642 0.721107C13.7617 0.504292 13.9375 0.323141 14.1513 0.196375C14.3651 0.0696094 14.6091 0.00182799 14.8581 3.64589e-05C15.1071 -0.00175508 15.3521 0.0625083 15.5677 0.186185C15.7834 0.309861 15.9618 0.488463 16.0846 0.703533Z" />
  </svg>
);

export default function Page({
    fillRating = 0,
  width = 24,
  height = 24,
   onChangeRating,
}: {
  fillRating?: number;
  width?: number;
  height?: number;
  onChangeRating?: (value: number) => void;
}) {
  const [rating, setRating] = useState(fillRating);
  const [hover, setHover] = useState(0);

  const handleRating = (value: number) => {
    setRating(value);
    onChangeRating?.(value);
  };

  return (
    <div className="flex gap-1.5">
      {[...Array(5)].map((_, index) => {
        const ratingValue = index + 1;

        return (
          <label key={index}>
            <input
              type="radio"
              name="rating"
              value={ratingValue}
              onClick={() => !fillRating && setRating(ratingValue)}
              className="hidden"
            />
            <div
              className={`cursor-pointer ${
                ratingValue <= (hover || rating)
                  ? "text-yellow-400"
                  : "text-white"
              }`}
              onMouseEnter={() => !fillRating && setHover(ratingValue)}
              onMouseLeave={() => !fillRating && setHover(0)}
             onClick={() => handleRating(ratingValue)}
            >
              <FullStar width={width} height={height} />
            </div>
          </label>
        );
      })}
    </div>
  );
}