Star Rating

"use client";

import * as React from "react";
import { Star } from "lucide-react";

export const StarRating: React.FC<{
  value?: number;
  max?: number;
  onChange?: (v: number) => void;
  className?: string;
}> = ({ value = 0, max = 5, onChange, className }) => {
  const [rating, setRating] = React.useState<number>(value);

  React.useEffect(() => setRating(value), [value]);

  const set = (v: number) => {
    setRating(v);
    onChange?.(v);
  };

  return (
    <div className={className}>
      <div className="flex items-center gap-1">
        {Array.from({ length: max }).map((_, i) => {
          const idx = i + 1;
          const filled = idx <= rating;
          return (
            <button
              key={idx}
              aria-label={`Rate ${idx} out of ${max}`}
              onClick={() => set(idx)}
              className={`rounded p-1 ${filled ? "text-amber-500" : "text-muted-foreground"}`}
            >
              <Star className="h-5 w-5" />
            </button>
          );
        })}
      </div>
      <div className="mt-2 text-sm text-muted-foreground">{rating}/{max}</div>
    </div>
  );
};

export default StarRating;