import React from "react";

interface StarRatingProps {
  value: number;
  baseColor?: string;
  filledColor?: string;
  size?: number;
}

const StarRating: React.FC<StarRatingProps> = ({
  value,
  baseColor = "#F2EFE7",
  filledColor = "#FFD95F",
  size = 24,
}) => {
  const stars = Array.from({ length: 5 }, (_, i) => {
    if (value >= i + 1) {
      return (
        <svg
          key={i}
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill={filledColor}
          width={size}
          height={size}
        >
          <path
            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      );
    } else if (value > i && value < i + 1) {
      return (
        <svg key={i} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={size} height={size}>
          <defs>
            <linearGradient id={`half-grad-${i}`}>
              <stop offset="50%" stopColor={filledColor} />
              <stop offset="50%" stopColor={baseColor} />
            </linearGradient>
          </defs>
          <path
            fill={`url(#half-grad-${i})`}
            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      );
    } else {
      return (
        <svg key={i} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={baseColor} width={size} height={size}>
          <path
            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      );
    }
  });

  return <div className="flex">{stars}</div>;
};

export default StarRating;
