import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { Check } from 'lucide-react'
import tw from 'twin.macro'

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>((props, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    css={tw`
      h-4
      w-4
      shrink-0
      rounded-sm
      border
      border-slate-300
      focus:outline-none
      focus:ring-2
      focus:ring-slate-400
      focus:ring-offset-2
      disabled:cursor-not-allowed
      disabled:opacity-50
      dark:border-slate-700
      dark:text-slate-50
      dark:focus:ring-slate-400
      dark:focus:ring-offset-slate-900
    `}
    {...props}
  >
    <CheckboxPrimitive.Indicator css={[tw`flex items-center justify-center`]}>
      <Check tw="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

const _Checkbox = Checkbox
export { _Checkbox as Checkbox }
export default _Checkbox
