import React from 'react';

interface StarRatingProps {
  rating: number;
  size?: 'small' | 'medium' | 'large';
  className?: string;
}

const StarRating: React.FC<StarRatingProps> = ({ 
  rating, 
  size = 'small', 
  className = '' 
}) => {
  const getSizeStyle = () => {
    switch (size) {
      case 'large':
        return { fontSize: '1.5rem' };
      case 'medium':
        return { fontSize: '1.2rem' };
      case 'small':
      default:
        return { fontSize: '1rem' };
    }
  };

  const renderStars = () => {
    const stars = [];
    const fullStars = Math.floor(rating);
    const hasHalfStar = rating % 1 !== 0;

    // Render filled stars
    for (let i = 0; i < fullStars; i++) {
      stars.push(
        <i
          key={`filled-${i}`}
          className="bi bi-star-fill"
          style={{ color: '#ffc107' }}
        ></i>
      );
    }

    // Render half star if needed
    if (hasHalfStar) {
      stars.push(
        <i
          key="half"
          className="bi bi-star-half"
          style={{ color: '#ffc107' }}
        ></i>
      );
    }

    // Render empty stars
    const emptyStars = 5 - Math.ceil(rating);
    for (let i = 0; i < emptyStars; i++) {
      stars.push(
        <i
          key={`empty-${i}`}
          className="bi bi-star"
          style={{ color: '#dee2e6' }}
        ></i>
      );
    }

    return stars;
  };

  return (
    <div className={`d-inline-flex align-items-center gap-1 ${className}`} style={getSizeStyle()}>
      {renderStars()}
    </div>
  );
};

export default StarRating;