import React, { FunctionComponent, MouseEventHandler, ReactNode } from "react";
import { Loader } from "../Loader";

import "./styles.scss";

interface IButtonProps {
  onClick?: MouseEventHandler<HTMLButtonElement>;
  type?: "primary" | "secondary" | "warning";
  size?: "normal" | "small";
  disabled?: boolean;
  children: ReactNode;
  className?: string;
  loading?: boolean;
  fullWidth?: boolean;
}

export const Button: FunctionComponent<IButtonProps> = (props) => {
  const { disabled, children, onClick, type = "primary", size = "normal", className = "", loading, fullWidth } = props;

  return (
    <button
      className={`c-button c-button--${type} c-button--${size} ${className} ${(fullWidth && "c-button--full-width") || ""}`}
      onClick={onClick}
      disabled={disabled}
    >
      {loading && (
        <div className="c-button__loader">
          <Loader color={type === "primary" ? "white" : "dark"} customSpinnerSize={2} scale={0.5} />
        </div>
      )}
      {children}
    </button>
  );
};
