import styles from "./Button.module.css";
const Button = ({
  variant,
  size,
  active,
  loading,
  disabled,
  children,
  ...buttonProps
}: any) => {
  return (
    <button
      className={`${styles["button"]} ${styles[variant]} ${styles[size]} ${
        active ? styles["button-active"] : ""
      } ${disabled ? styles["disabled"] : ""}`}
      {...buttonProps}
    >
      {loading && (
        <>
          <div
            className={`${styles[`loader-${size}`]} ${styles["loader"]}`}
          ></div>
          <span>Loading</span>
        </>
      )}
      {!loading && children}
    </button>
  );
};

export default Button;
