import React from 'react';

import { Checkbox } from '@djangocfg/ui-core/components';
import { WidgetProps } from '@rjsf/utils';

/**
 * Checkbox widget for JSON Schema Form
 * Handles boolean fields
 */
export function CheckboxWidget(props: WidgetProps) {
  const {
    id,
    value,
    disabled,
    readonly,
    autofocus,
    onChange,
    onBlur,
    onFocus,
  } = props;

  const handleChange = (checked: boolean) => {
    onChange(checked);
  };

  return (
    <Checkbox
      id={id}
      checked={value || false}
      disabled={disabled || readonly}
      autoFocus={autofocus}
      onCheckedChange={handleChange}
      onBlur={() => onBlur(id, value)}
      onFocus={() => onFocus(id, value)}
    />
  );
}
