import { ReactNode } from "react";

interface Props {
  children: ReactNode;
  variant?: "primary" | "secondary" | "plain";
  size?: "sm" | "md" | "lg" | "xl" | "2xl";
  fullWidth?: boolean;
  className?: string;
  disabled?: boolean;
  iconLeft?: ReactNode;
  iconRight?: ReactNode;
  onClick?: (...args: unknown[]) => unknown;
}

const Button = ({
  children,
  className,
  variant = "plain",
  size = "md",
  fullWidth = false,
  disabled = false,
  onClick,
  iconLeft,
  iconRight,
}: Props) => (
  <button
    type="button"
    className={`btn btn-${variant} btn-${size} ${fullWidth && "w-100"} ${
      className && className
    }`}
    onClick={onClick}
    disabled={disabled}
  >
    <>
      {iconLeft && <span className="btn-icon btn-icon-left">{iconLeft}</span>}
      {children}
      {iconRight && (
        <span className="btn-icon btn-icon-right">{iconRight}</span>
      )}
    </>
  </button>
);

export { Button };
