import React from 'react';
import { Checkbox as ChakraCheckbox, FormControl, FormErrorMessage, FormHelperText } from '@chakra-ui/react';

export interface CheckboxProps {
  /**
   * Whether the checkbox is checked
   */
  checked?: boolean;
  /**
   * Whether the checkbox is disabled
   */
  isDisabled?: boolean;
  /**
   * Whether the checkbox is invalid
   */
  isInvalid?: boolean;
  /**
   * Error message to display when the checkbox is invalid
   */
  errorMessage?: string;
  /**
   * Helper text to display below the checkbox
   */
  helperText?: string;
  /**
   * Change handler for the checkbox
   */
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /**
   * Children (label/content)
   */
  children?: React.ReactNode;
  /**
   * ID for the checkbox input
   */
  id?: string;
  /**
   * Name for the checkbox input
   */
  name?: string;
}

/**
 * Checkbox component for boolean input
 */
export const Checkbox: React.FC<CheckboxProps> = ({
  isInvalid = false,
  errorMessage,
  helperText,
  children,
  ...rest
}) => {
  return (
    <FormControl isInvalid={isInvalid} mb={4}>
      <ChakraCheckbox {...rest}>{children}</ChakraCheckbox>
      {isInvalid && errorMessage && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
      {helperText && !isInvalid && <FormHelperText>{helperText}</FormHelperText>}
    </FormControl>
  );
};

export default Checkbox;
