import { CheckboxInput } from '@astryxdesign/core/CheckboxInput'
import type { JSX } from 'react'

export interface CheckboxProps {
  label: string
  checked: boolean
  onCheckedChange(checked: boolean): void
  /** Visible explanation rendered under the label — never colour alone for a warning. */
  hint?: string
  error?: string
  id?: string
  name?: string
  disabled?: boolean
  isDisabled?: boolean
  'data-testid'?: string
}

export function Checkbox({
  label,
  checked,
  onCheckedChange,
  hint,
  error,
  isDisabled,
  disabled,
  name,
  ...rest
}: CheckboxProps): JSX.Element {
  return (
    <CheckboxInput
      {...rest}
      label={label}
      value={checked}
      onChange={(next) => onCheckedChange(next)}
      htmlName={name}
      isDisabled={isDisabled ?? disabled}
      description={hint}
      status={error !== undefined ? { type: 'error', message: error } : undefined}
    />
  )
}