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

interface RatingStarsProps {
  rating: number;
  max?: number;
  size?: number;
  className?: string;
}

export const RatingStars: React.FC<RatingStarsProps> = ({
  rating,
  max = 5,
  size = 16,
  className = '',
}) => {
  const stars = [];
  const roundedRating = Math.round(rating * 2) / 2;

  for (let i = 1; i <= max; i++) {
    const isFull = i <= roundedRating;
    const isHalf = !isFull && i - 0.5 <= roundedRating;

    stars.push(
      <span key={i} className="text-[#FFB21E] inline-flex">
        {isFull ? (
          <Star size={size} fill="currentColor" stroke="currentColor" />
        ) : isHalf ? (
          <span className="relative inline-flex" style={{ width: size, height: size }}>
            <Star size={size} className="absolute top-0 left-0 text-gray-300" />
            <span className="absolute top-0 left-0 overflow-hidden" style={{ width: '50%' }}>
              <Star size={size} fill="currentColor" stroke="currentColor" />
            </span>
          </span>
        ) : (
          <Star size={size} className="text-gray-300" />
        )}
      </span>
    );
  }

  return <div className={`flex items-center gap-0.5 ${className}`}>{stars}</div>;
};