import cn from "../utils/cn";

const Button = ({ children, onClick, className, type = "primary", disabled, icon }) => {
  const getTypeClassNames = () => {
    switch (type) {
      case "primary":
        return cn(
          "wmx-text-white",
          "wmx-bg-primary",
          "wmx-border-primary",
          "hover:wmx-bg-primary-dark",
          "hover:wmx-border-primary-dark",
        );
      case "secondary":
        return cn(
          "wmx-text-grey-dark",
          "wmx-bg-gray-300",
          "wmx-border-gray-300",
          "hover:wmx-bg-gray-300",
          "hover:wmx-border-gray-300",
        );
      case "danger":
        return cn(
          "wmx-text-white",
          "wmx-bg-red-500",
          "wmx-border-red-500",
          "hover:wmx-bg-red-600",
          "hover:wmx-border-red-600",
        );
      default:
        return "wmx-text-white wmx-bg-primary wmx-border-primary hover:wmx-bg-primary-dark hover:wmx-border-primary-dark";
    }
  };

  return (
    <button
      disabled={disabled}
      className={cn(
        "wmx-py-1 wmx-transition-colors wmx-px-4 wmx-flex wmx-text-[15px] wmx-gap-2 wmx-justify-center wmx-items-center !wmx-outline-none wmx-font-semibold wmx-rounded-md wmx-leading-[2]",
        getTypeClassNames(),
        className,
      )}
      onClick={onClick}
    >
      {icon} {children}
    </button>
  );
};
export default Button;
