import { FunctionComponent } from 'preact'

type CheckboxProps = {
  name: string
  checked: boolean
  onChange: (e: Event) => void
  disabled?: boolean
  label: string
}

export const Checkbox: FunctionComponent<CheckboxProps> = ({ name, checked, onChange, disabled, label }) => {
  return (
    <label htmlFor={name} className="flex items-center fit-content mb-2">
      <input
        className="mr-2"
        type="checkbox"
        name={name}
        id={name}
        checked={checked}
        onChange={onChange}
        disabled={disabled}
      />
      {label}
    </label>
  )
}