import * as LabelPrimitive from '@radix-ui/react-label'
import type { ReactNode } from 'react'
import type React from 'react'
import { cn } from '../../utils'
import { typographyVariants } from '../Typography'
import { Checkbox } from './Checkbox'

type LabeledCheckboxProps = React.ComponentPropsWithoutRef<typeof Checkbox> & {
  children: ReactNode
  className?: string
}

const LabeledCheckbox = ({
  children,
  className,

  ...checkboxProps
}: LabeledCheckboxProps) => {
  return (
    <LabelPrimitive.Root
      className={cn(
        'flex w-fit items-center gap-2 text-input-foreground',
        typographyVariants(),
        checkboxProps.disabled &&
          'text-input-muted-more-foreground [&_*:not([role="checkbox"])]:pointer-events-none',

        className,
      )}
    >
      <Checkbox {...checkboxProps} />
      {children}
    </LabelPrimitive.Root>
  )
}

LabeledCheckbox.displayName = 'LabeledCheckbox'

export { LabeledCheckbox }