import React from 'react';
import { Star } from 'lucide-react';
import clsx from 'clsx';

type StarRatingProps = {
  rating: number;
  setRating: (value: number) => void;
};

const StarRating = ({ rating, setRating }: StarRatingProps) => {
  return (
    <div className='flex gap-[4px] flex-row-reverse justify-end cursor-pointer'>
      {[5, 4, 3, 2, 1].map((x) => (
        <Star
          onClick={() => setRating(x)}
          size='20px'
          className={clsx(
            'text-gray-500 peer hover:fill-yellow-500 hover:text-yellow-500 peer-hover:fill-yellow-500 peer-hover:text-yellow-500',
            rating >= x ? 'fill-yellow-500 text-yellow-500' : 'fill-gray-500'
          )}
        />
      ))}
    </div>
  );
};

export { StarRating, StarRatingProps };
