components/button/index.tsx

import classNames from "classnames";

interface Props {
  children: React.ReactNode;
  disabled?: boolean;
  theme?: "primary" | "secondary" | "white";
  onClick?: () => void;
}
export const Button: React.FC<Props> = ({
  children,
  disabled,
  theme = "primary",
  ...props
}) => {
  return (
    <button
      className={classNames(
        "rounded-full px-6 py-2.5 font-semibold flex items-center justify-center gap-2.5 border-[2px] transition-all duration-200 max-w-max",
        {
          "bg-primary text-white border-primary": theme === "primary",
          "bg-white text-gray-900 border-white": theme === "white",
          "!bg-gray-400 !text-gray-600 !cursor-not-allowed !border-gray-400":
            disabled,
        }
      )}
      {...props}
    >
      {children}
    </button>
  );
};