// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useId, useState, type ComponentProps } from "react";
export type RatingProps = Omit<
  ComponentProps<"fieldset">,
  "onChange" | "defaultValue"
> & {
  label?: string;
  max?: number;
  name?: string;
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  readOnly?: boolean;
};
export function Rating({
  label = "Rating",
  max = 5,
  name,
  value,
  defaultValue = 0,
  onValueChange,
  readOnly = false,
  disabled,
  className = "",
  ...props
}: RatingProps) {
  const id = useId();
  const [internal, setInternal] = useState(defaultValue);
  const count = Number.isFinite(max)
    ? Math.max(1, Math.min(10, Math.floor(max)))
    : 5;
  const selected = value ?? internal;
  return (
    <fieldset
      disabled={disabled || readOnly}
      className={`ynr-rating ${className}`}
      {...props}
    >
      <legend>{label}</legend>
      {Array.from({ length: count }, (_, i) => (
        <label key={i} data-filled={i < selected}>
          <input
            type="radio"
            name={name ?? id}
            aria-label={`${i + 1} ${i === 0 ? "star" : "stars"}`}
            checked={selected === i + 1}
            value={i + 1}
            onChange={() => {
              if (value === undefined) setInternal(i + 1);
              onValueChange?.(i + 1);
            }}
          />
          <span aria-hidden="true">★</span>
        </label>
      ))}
    </fieldset>
  );
}