"use client"

import * as React from "react"
import { Button as BaseButton } from "@base-ui/react/button"
import { cn } from "@/lib/utils"

export type ButtonProps = React.ComponentPropsWithoutRef<typeof BaseButton> & {
  className?: string
}

const BaseButtonElement = BaseButton as React.ElementType

export const Button = React.forwardRef<HTMLElement, ButtonProps>(
  ({ className, ...props }, ref) => (
    <BaseButtonElement
      ref={ref}
      className={cn(
        "flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none [&:not([data-disabled]):hover]:bg-neutral-100 [&:not([data-disabled]):active]:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:cursor-default data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:cursor-default disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:[&:not([data-disabled]):hover]:bg-neutral-800 dark:[&:not([data-disabled]):active]:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400",
        className,
      )}
      {...props}
    />
  ),
)

Button.displayName = "Button"