import { Star } from "lucide-react";

interface StarRatingDisplayProps {
  rating: number;
  size?: "sm" | "md" | "lg";
  showNumber?: boolean;
}

export function StarRatingDisplay({ 
  rating, 
  size = "md",
  showNumber = false 
}: StarRatingDisplayProps) {
  const sizeClasses = {
    sm: "w-4 h-4",
    md: "w-5 h-5",
    lg: "w-6 h-6"
  };

  const stars = [];
  for (let i = 1; i <= 5; i++) {
    stars.push(
      <Star
        key={i}
        className={`${sizeClasses[size]} ${
          i <= rating 
            ? "fill-yellow-400 text-yellow-400" 
            : "fill-gray-200 text-gray-200"
        }`}
      />
    );
  }

  return (
    <div className="flex items-center gap-1">
      {stars}
      {showNumber && (
        <span className="ml-1 text-sm text-muted-foreground">
          ({rating.toFixed(1)})
        </span>
      )}
    </div>
  );
}