import { Checkbox as CheckboxPrimitive } from './'

interface CheckboxProps {
  label: string
  withText?: boolean
  explain?: string
  disabled?: boolean
}

export function Checkbox({
  label,

  withText = false,

  explain = '',

  disabled = false,
}: CheckboxProps) {
  return (
    <div tw="items-start flex space-x-2">
      <CheckboxPrimitive id="terms1" disabled={disabled} />

      <div tw="grid gap-1.5 leading-none">
        <label
          htmlFor="terms1"
          tw="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
          {label}
        </label>

        {withText ? (
          <p tw="text-sm text-slate-500 dark:text-slate-400">{explain}</p>
        ) : (
          ''
        )}
      </div>
    </div>
  )
}
