import React from "react";
import PropTypes from "prop-types";

import "./Button2.scss";

/**
 * The only true button.
 */
export default function Button2({
  color,
  size,
  onClick,
  disabled,
  children,
  preProps
}) {
  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.propTypes = {
  /** Button2 label */
  children: PropTypes.node.isRequired,
  /** The color for the button */
  color: PropTypes.string,
  /** The size of the button */
  size: PropTypes.oneOf(["small", "normal", "large"]),
  /** Disable button */
  disabled: PropTypes.bool,
  /** Gets called when the user clicks on the button */
  onClick: PropTypes.func,
  /** Gets called when the user clicks on the button */
  preProps: PropTypes.object
};
Button2.defaultProps = {
  color: "#333",
  size: "normal",
  onClick: event => {
    // eslint-disable-next-line no-console
    console.log("You have clicked me!", event.target);
  },
  preProps: {}
};
Button2.sizes = {
  small: "10px",
  normal: "14px",
  large: "18px"
};