import { clsx } from "clsx";
import { forwardRef, JSX } from "react";

const sizeClasses = {
  medium: "py-2 px-4",
};

export type ButtonProps = JSX.IntrinsicElements["button"] & {
  size?: keyof typeof sizeClasses;
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ size = "medium", className, children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={clsx(
          "border border-neutral-800 rounded-md not-disabled:cursor-pointer not-disabled:hover:bg-neutral-800 not-disabled:hover:text-white/90 disabled:cursor-not-allowed active:scale-95 transition duration-200",
          className,
          sizeClasses[size],
        )}
        {...props}
      >
        {children}
      </button>
    );
  },
);

Button.displayName = "Button";