"use client";

interface StarRowProps {
  rating: number;
  /** Size: 'sm' | 'md' | 'lg' */
  size?: "sm" | "md" | "lg";
}

const sizeClasses = {
  sm: "text-lg",
  md: "text-2xl",
  lg: "text-3xl",
};

export default function StarRow({ rating, size = "md" }: StarRowProps) {
  const clamped = Math.min(5, Math.max(0, rating));
  let fullCount = Math.floor(clamped);
  const decimal = clamped - fullCount;
  let hasHalf = false;
  if (decimal >= 0.75) {
    fullCount += 1;
  } else if (decimal >= 0.25 && decimal < 0.75) {
    hasHalf = true;
  }
  const halfAt = fullCount + 1;
  const sizeClass = sizeClasses[size];

  return (
    <div className={`flex gap-0.5 ${sizeClass}`} dir="ltr">
      {[1, 2, 3, 4, 5].map((star) => {
        if (star <= fullCount) {
          return (
            <span key={star} className="text-amber-400">
              ★
            </span>
          );
        }
        if (star === halfAt && hasHalf) {
          return (
            <span
              key={star}
              className="relative inline-block w-[1em] leading-none mt-1"
            >
              <span className="text-slate-300">☆</span>
              <span
                className="absolute left-0 top-0 text-amber-400 leading-none"
                style={{ clipPath: "inset(0 50% 0 0)" }}
              >
                ★
              </span>
            </span>
          );
        }
        return (
          <span key={star} className="text-slate-300">
            ☆
          </span>
        );
      })}
    </div>
  );
}