"use client";

import * as React from "react";
import { Checkbox as KumoCheckbox, type CheckboxProps as KumoCheckboxProps } from "@cloudflare/kumo/components/checkbox";

type CheckboxProps = Omit<KumoCheckboxProps, "checked" | "onCheckedChange"> & {
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
};

export function Checkbox({
  checked,
  defaultChecked = false,
  name,
  onCheckedChange,
  ...props
}: CheckboxProps): React.ReactElement {
  const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
  const isControlled = checked !== undefined;
  const currentChecked = isControlled ? checked : uncontrolledChecked;

  return (
    <>
      <KumoCheckbox
        checked={currentChecked}
        onCheckedChange={(nextChecked) => {
          const booleanValue = Boolean(nextChecked);
          if (!isControlled) {
            setUncontrolledChecked(booleanValue);
          }
          onCheckedChange?.(booleanValue);
        }}
        {...props}
      />
      {name && currentChecked ? <input name={name} type="hidden" value="on" /> : null}
    </>
  );
}