import { IconCheck as Check } from '@tabler/icons-react'

export interface CheckboxProps {
  checked: boolean
  onChange: (checked: boolean) => void
  id?: string
  'aria-label'?: string
  disabled?: boolean
}

/** 18px square checkbox: orange fill + dark check when active (auth design). */
export function Checkbox({ checked, onChange, id, disabled, ...aria }: CheckboxProps) {
  return (
    <button
      type="button"
      id={id}
      role="checkbox"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={`flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 ${
        checked ? 'border-primary bg-primary text-primary-foreground' : 'border-input bg-card'
      }`}
      {...aria}
    >
      {checked && <Check size={12} strokeWidth={3} aria-hidden />}
    </button>
  )
}