import React from "react";
import styles from "./button.module.css";

type ButtonVariant = "primary" | "secondary" | "outline";
type ButtonSize = "small" | "medium" | "large";
type IconPosition = "left" | "right";

interface AppButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  btnVariant?: ButtonVariant;
  btnSize?: ButtonSize;
  icon?: React.ReactNode;
  iconPosition?: IconPosition;
  isLoading?: boolean;
  children?: React.ReactNode;
}

const Button: React.FC<AppButtonProps> = ({
  btnVariant = "primary",
  btnSize = "medium",
  icon,
  iconPosition = "left",
  isLoading = false,
  disabled,
  children,
  className = "",
  ...props
}) => {
  const buttonClass = `
    ${styles.button}
    ${styles[btnVariant]}
    ${styles[btnSize]}
    ${isLoading || disabled ? styles.disabled : ""}
    ${className}
  `.trim();

  return (
    <button className={buttonClass} disabled={disabled || isLoading} {...props}>
      {isLoading ? (
        <span className={styles.loader}></span>
      ) : (
        <>
          {icon && iconPosition === "left" && (
            <span className={styles.icon}>{icon}</span>
          )}
          {children && <span>{children}</span>}
          {icon && iconPosition === "right" && (
            <span className={styles.icon}>{icon}</span>
          )}
        </>
      )}
    </button>
  );
};

export default Button;


// import React from "react";
// import styles from "./button.module.css";

// type ButtonVariant = "primary" | "secondary";

// interface AppButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
//   btnVariant?: ButtonVariant;
//   children: React.ReactNode;
// }

// const Button: React.FC<AppButtonProps> = ({
//   btnVariant = "primary",
//   children,
//   className = "",
//   ...props
// }) => {
//   const buttonClass = `${styles.button} ${
//     btnVariant === "primary" ? styles.primaryButton : styles.secondaryButton
//   } ${className}`;

//   return (
//     <button className={buttonClass} {...props}>
//       {children}
//     </button>
//   );
// };

// export default Button;