import type { ReactNode } from "react";

/**
 * The `type="radio"` sibling of {@link CheckboxOption} — same "selectable
 * card" markup/look (see `global.scss`'s `label:has(> input[...])` rule,
 * shared by both), just a native radio input under the hood so a group of
 * `RadioOption`s sharing `name` behaves as mutually exclusive (see
 * `UserPreferencesPage`'s theme picker, the one caller so far).
 */
export function RadioOption<T extends string>({
  name,
  value,
  checked,
  onChange,
  children,
  className,
}: {
  name: string;
  value: T;
  checked: boolean;
  onChange: (value: T) => void;
  children: ReactNode;
  className?: string;
}) {
  return (
    <label className={[className, checked && "is-selected"].filter(Boolean).join(" ")}>
      <input
        type="radio"
        name={name}
        value={value}
        checked={checked}
        onChange={() => onChange(value)}
      />
      <span className="check-mark" aria-hidden="true" />
      {children}
    </label>
  );
}