import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
import { Field } from '@base-ui/react/field';
import { CheckIcon } from 'lucide-react';
import { cn } from '#/lib/utils.js';

/** A checkbox whose value submits through the form like any field. */
export function CheckboxField({ className, name, label, ...props }) {
  return (
    <Field.Root name={name} className={className}>
      <Field.Label className="flex cursor-pointer items-center gap-2 text-foreground text-sm">
        <BaseCheckbox.Root
          className={cn(
            'flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input bg-transparent shadow-xs outline-none',
            'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
            'data-checked:border-primary data-checked:bg-primary',
          )}
          {...props}
        >
          <BaseCheckbox.Indicator className="flex text-primary-foreground">
            <CheckIcon className="size-3" />
          </BaseCheckbox.Indicator>
        </BaseCheckbox.Root>
        {label}
      </Field.Label>
    </Field.Root>
  );
}