import React, { ReactNode } from "react";
import "./Button.scss";
type ButtonProps = {
  children?: ReactNode;
  color?: string;
  size?: "small" | "normal" | "large";
  disabled?: boolean;
  onClick?: (...args: any[]) => any;
};

type sizes = {};

const Button: React.SFC<ButtonProps> & any = ({
  color,
  size,
  onClick,
  disabled,
  children
}: ButtonProps) => {
  const styles = {
    color,
    fontSize: Button.sizes[size]
  };
  return (
    <button
      className="compoment--button"
      style={styles}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
};
Button.defaultProps = {
  color: "#333",
  size: "normal",
  onClick: (event: any) => {
    // eslint-disable-next-line no-console
    console.log("You have clicked me!", event.target);
  }
};

Button.sizes = {
  small: "10px",
  normal: "14px",
  large: "18px"
};

export default Button;