import { Slot } from "@radix-ui/react-slot"
import React, { ComponentPropsWithoutRef, forwardRef } from "react"
import { disabledVariants } from "../../styles"
import { classNames } from "../../utils"
import { SlotProps } from "../Slot"

export type UnstyledButtonProps = Omit<
  ComponentPropsWithoutRef<"button"> & SlotProps<"button">,
  "content"
>

export const UnstyledButton = forwardRef<
  HTMLButtonElement,
  UnstyledButtonProps
>(function UnstyledButton({ asChild, className, disabled, ...rest }, ref) {
  const Comp = asChild ? Slot : "button"

  return (
    <Comp
      className={classNames(
        "inline-flex items-center border-0",
        disabledVariants({ disabled }),
        className,
      )}
      disabled={disabled}
      ref={ref}
      type="button"
      {...rest}
    />
  )
})