import clsx from 'clsx'
import { type ComponentProps } from 'react'

import { Checkbox as RadixCheckbox } from 'radix-ui'

import { TbMinus } from 'react-icons/tb'

import { indicatorStyles, rootStyles } from './Checkbox.styles'

import { CheckIcon } from '../icons'

type CheckboxProps = ComponentProps<typeof RadixCheckbox.Root> & {
	indeterminate?: boolean
}

function Checkbox({ className, indeterminate, ...props }: CheckboxProps) {
	return (
		<RadixCheckbox.Root className={clsx(rootStyles, className)} {...props}>
			<RadixCheckbox.Indicator className={indicatorStyles}>
				{indeterminate ? <TbMinus /> : <CheckIcon />}
			</RadixCheckbox.Indicator>
		</RadixCheckbox.Root>
	)
}

export { Checkbox }
