"use client"

import * as React from "react"
import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
import { cn } from "@/lib/utils"

export type CheckboxRootProps = React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root> & {
  className?: string
}

const BaseCheckboxRoot = BaseCheckbox.Root as React.ElementType

export const CheckboxRoot = React.forwardRef<HTMLElement, CheckboxRootProps>(
  ({ className, ...props }, ref) => (
    <BaseCheckboxRoot
      ref={ref}
      className={cn(
        "flex size-4 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white p-0 text-white data-checked:bg-neutral-950 data-checked:text-white focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950 dark:focus-visible:outline-white",
        className,
      )}
      {...props}
    />
  ),
)

CheckboxRoot.displayName = "CheckboxRoot"