import type { ReactNode } from "react";

/**
 * The app-wide "selectable card" checkbox — see `global.scss`'s
 * `label:has(> input[type="checkbox"])` rule for the actual look (hidden
 * native input, a `.check-mark` that scales in, `is-selected` driving the
 * tinted/bordered state). Factors out the JSX triplet (`label` → hidden
 * `input` → `span.check-mark` → label text) that used to be duplicated
 * across `AllergySelect`, `DietTagSelect`, `IngredientPicker`'s display
 * menu, and `UserPreferencesPage`'s theme picker (see {@link RadioOption}
 * for its `type="radio"` sibling) — one place to get the markup/a11y right
 * instead of four.
 *
 * `is-selected` is applied in JS from the same `checked` boolean the caller
 * already has, not derived via a CSS `:has(:checked)` chain — that turned
 * out unreliable across browsers (see the callers this replaces for the
 * original note).
 *
 * `className` is for the *container* layout only (grid item, flex-wrap
 * chip, stacked list…) — the control's own look never varies, so there's
 * no `variant` prop here.
 */
export function CheckboxOption({
  checked,
  onChange,
  children,
  className,
}: {
  checked: boolean;
  onChange: (checked: boolean) => void;
  children: ReactNode;
  className?: string;
}) {
  return (
    <label className={[className, checked && "is-selected"].filter(Boolean).join(" ")}>
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
      <span className="check-mark" aria-hidden="true" />
      {children}
    </label>
  );
}