import React from 'react';

import Image from 'next/image';
import starIcon from '../../../public/icons/Star.svg';
import emptyStar from '../../../public/icons/emptyStar.svg';

const ReviewStars = ({ rate }: { rate: number }) => {
  /*const [rating, setRating] = useState(0);

  const handleStarClick = (selectedRating: number) => {
    setRating(selectedRating);
  };*/

  return (
    <div>
      {[1, 2, 3, 4, 5].map((star) => (
        <span
          key={star}
          style={{
            cursor: 'pointer',
          }}
        >
          {star <= rate ? (
            <Image src={starIcon} alt="Empty Star Icon" />
          ) : (
            <Image src={emptyStar} alt="Star Icon" />
          )}
        </span>
      ))}
    </div>
  );
};

export default ReviewStars;