import React, { ReactNode } from "react";
import "./Button2.scss";

type sizes = { [s: string]: string };
type Button2Props = {
  children?: ReactNode;
  color?: string;
  size?: "small" | "normal" | "large";
  disabled?: boolean;
  onClick?: (...args: any[]) => any;
  preProps?: object;
};
const Button2: React.SFC<Button2Props> & any = ({
  color,
  size,
  onClick,
  disabled,
  children,
  preProps
}: Button2Props) => {
  const styles = {
    color,
    fontSize: Button2.sizes[size]
  };
  return (
    <button
      className="key46--submit-button w-button"
      style={styles}
      onClick={onClick}
      disabled={disabled}
      {...preProps}
    >
      {children}
    </button>
  );
};
Button2.defaultProps = {
  color: "#333",
  size: "normal",
  onClick: (event: any) => {
    // eslint-disable-next-line no-console
    console.log("You have clicked me!", event.target);
  },
  preProps: {}
};
Button2.sizes = {
  small: "10px",
  normal: "14px",
  large: "18px"
};
export default Button2;