// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useId, useState, type ComponentProps, type ReactNode } from "react";
export interface ChoiceboxOption {
  value: string;
  label: ReactNode;
  description?: ReactNode;
  disabled?: boolean;
}
export type ChoiceboxProps = Omit<
  ComponentProps<"fieldset">,
  "onChange" | "defaultValue"
> & {
  label: string;
  options: readonly ChoiceboxOption[];
  name?: string;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  required?: boolean;
};
export function Choicebox({
  label,
  options,
  name,
  value,
  defaultValue = "",
  onValueChange,
  required,
  className = "",
  disabled,
  ...props
}: ChoiceboxProps) {
  const id = useId();
  const [internal, setInternal] = useState(defaultValue);
  return (
    <fieldset
      disabled={disabled}
      className={`ynr-choicebox ${className}`}
      {...props}
    >
      <legend>{label}</legend>
      {options.map((option) => (
        <label className="ynr-choicebox-option" key={option.value}>
          <span>
            {option.label}
            {option.description && <small>{option.description}</small>}
          </span>
          <input
            type="radio"
            name={name ?? id}
            value={option.value}
            checked={(value ?? internal) === option.value}
            disabled={option.disabled}
            required={required}
            onChange={() => {
              if (value === undefined) setInternal(option.value);
              onValueChange?.(option.value);
            }}
          />
        </label>
      ))}
    </fieldset>
  );
}