import { cn } from "@heroui/react"
import type { ReactNode } from "react"

interface ToolButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: ReactNode
  className?: string
  selected?: boolean
}
export const ToolButton = ({ children, className, selected, disabled, ...rest }: ToolButtonProps) => {
  return (
    <button
      type="button"
      disabled={disabled}
      className={cn(
        "flex shrink-0 gap-0.5 items-center min-w-7 justify-center px-2 py-1.5 bg-black/5 transition rounded-md text-sm leading-none",
        disabled
          ? "opacity-50 cursor-not-allowed"
          : "active:scale-95 cursor-pointer hover:bg-black/10 dark:hover:bg-white/10",
        "dark:bg-white/5",
        className,
        selected &&
          "bg-purple-500/40 hover:bg-purple-500/20 text-purple-900 dark:text-purple-100 drop-shadow-sm dark:bg-purple-500/40 dark:hover:bg-purple-500/20"
      )}
      {...rest}
    >
      {children}
    </button>
  )
}