import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import type React from 'react'
import { cn } from '../../utils'
import { CheckedIcon } from './CheckedIcon'
import { IndeterminateIcon } from './IndeterminateIcon'

type CheckboxProps = React.ComponentPropsWithoutRef<
  typeof CheckboxPrimitive.Root
> & {
  error?: boolean | undefined
  ref?: React.Ref<React.ElementRef<typeof CheckboxPrimitive.Root>>
}

const Checkbox = ({
  className,
  error = false,
  ref,
  ...props
}: CheckboxProps) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      'peer relative flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-solid border-input-border bg-input hover:border-input-border-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:border-input-border-disabled disabled:bg-input-disabled',
      error && 'border-input-border-error',
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn('group absolute left-[-1px] top-[-1px] size-4')}
    >
      <>
        <CheckedIcon disabled={props.disabled} />
        <IndeterminateIcon disabled={props.disabled} />
      </>
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
)

Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }