import classNames from 'classnames'
import { FC, InputHTMLAttributes, ReactNode } from 'react'

export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: ReactNode
  errorMessage?: string
  variant?: 'primary' | 'gray'
  size?: 'xs' | 'sm' | 'md' | 'lg'
}

export const Checkbox: FC<CheckboxProps> = ({
  label,
  errorMessage,
  variant = 'primary',
  id,
  className,
  checked,
  onChange,
  onBlur,
  onFocus,
  disabled,
  name,
  value,
  defaultChecked,
  required,
  readOnly,
  tabIndex,
  form,
  size = 'md',
}) => {
  const checkboxClass = classNames('checkbox', {
    'checkbox-primary': variant !== 'gray',
    'border-gray-400 checked:bg-gray-400': variant === 'gray',
    'checkbox-xs': size === 'xs',
    'checkbox-sm': size === 'sm',
    'checkbox-lg': size === 'lg',
  })

  return (
    <div className={classNames('flex flex-col gap-1', className)}>
      <label htmlFor={id} className="flex items-center gap-2 cursor-pointer">
        <input
          type="checkbox"
          className={checkboxClass}
          checked={checked}
          id={id}
          onChange={onChange}
          onBlur={onBlur}
          onFocus={onFocus}
          disabled={disabled}
          name={name}
          value={value}
          defaultChecked={defaultChecked}
          required={required}
          readOnly={readOnly}
          tabIndex={tabIndex}
          form={form}
        />
        {label && <span className="text-sm select-none">{label}</span>}
      </label>

      {errorMessage && <span className="text-xs text-error">{errorMessage}</span>}
    </div>
  )
}