import { Star } from "lucide-react";

interface StarRatingProps {
  value: number;
  size?: number;
  onChange?: (value: number) => void;
  readOnly?: boolean;
  className?: string;
}

/**
 * Lightweight star rating component. Supports readOnly display and
 * interactive rating selection for review submission.
 */
export default function StarRating({
  value,
  size = 16,
  onChange,
  readOnly = true,
  className = "",
}: StarRatingProps) {
  return (
    <div className={`inline-flex items-center gap-0.5 ${className}`}>
      {[1, 2, 3, 4, 5].map((n) => {
        const filled = n <= Math.round(value);
        const Component = readOnly ? "span" : "button";
        return (
          <Component
            key={n}
            type={readOnly ? undefined : "button"}
            onClick={readOnly ? undefined : () => onChange?.(n)}
            className={readOnly ? "" : "hover:scale-110 transition-transform"}
            aria-label={`Rate ${n}`}
          >
            <Star
              width={size}
              height={size}
              className={filled ? "fill-amber-400 text-amber-400" : "text-slate-300"}
            />
          </Component>
        );
      })}
    </div>
  );
}