import type { ReactNode } from "react";
import FormControlLabel from "@mui/material/FormControlLabel";
import MuiCheckbox from "@mui/material/Checkbox";

/** Boolean checkbox with a label (distinct from SwitchField's toggle semantics). */
export function CheckboxField({
  label,
  checked,
  onChange,
  disabled,
  name,
  id,
  indeterminate,
  required,
}: {
  label: ReactNode;
  checked: boolean;
  onChange: (v: boolean) => void;
  disabled?: boolean;
  name?: string;
  id?: string;
  indeterminate?: boolean;
  required?: boolean;
}) {
  return (
    <FormControlLabel
      control={
        <MuiCheckbox
          checked={checked}
          onChange={(e) => onChange(e.target.checked)}
          disabled={disabled}
          name={name}
          id={id}
          indeterminate={indeterminate}
          required={required}
        />
      }
      label={label}
      disabled={disabled}
      required={required}
    />
  );
}
