Rating

"use client";

import * as React from "react";
import { motion } from "motion/react";
import { Star } from "lucide-react";
import { cn } from "@/lib/utils";

export interface RatingProps {
  value: number;
  onValueChange?: (v: number) => void;
  max?: number;
  size?: number;
  /** Show half stars for read-only averages like 4.5. */
  readOnly?: boolean;
  className?: string;
  "aria-label"?: string;
}

export function Rating({ value, onValueChange, max = 5, size = 18, readOnly, className, ...aria }: RatingProps) {
  const [hover, setHover] = React.useState<number | null>(null);
  const shown = hover ?? value;
  const interactive = !readOnly && !!onValueChange;
  return (
    <div
      role={interactive ? "radiogroup" : "img"}
      aria-label={aria["aria-label"] ?? `${value} out of ${max} stars`}
      className={cn("inline-flex items-center gap-0.5", className)}
      onPointerLeave={() => setHover(null)}
    >
      {Array.from({ length: max }, (_, i) => {
        const fill = Math.max(0, Math.min(1, shown - i));
        const star = (
          <span className="relative inline-block" style={{ width: size, height: size }}>
            <Star className="absolute inset-0 text-muted-foreground/30" style={{ width: size, height: size }} />
            <span className="absolute inset-0 overflow-hidden" style={{ width: `${fill * 100}%` }}>
              <Star className="fill-amber-400 text-amber-400" style={{ width: size, height: size }} />
            </span>
          </span>
        );
        return interactive ? (
          <motion.button
            key={i}
            type="button"
            role="radio"
            aria-checked={Math.round(value) === i + 1}
            aria-label={`${i + 1} star${i ? "s" : ""}`}
            whileTap={{ scale: 0.85 }}
            onPointerEnter={() => setHover(i + 1)}
            onClick={() => onValueChange(i + 1)}
            onKeyDown={(e) => {
              if (e.key === "ArrowRight") onValueChange(Math.min(max, value + 1));
              if (e.key === "ArrowLeft") onValueChange(Math.max(1, value - 1));
            }}
            className="rounded outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            {star}
          </motion.button>
        ) : (
          <span key={i}>{star}</span>
        );
      })}
    </div>
  );
}