import React, { PropTypes, Component } from 'react';

class StyleButton extends Component {


  onToggle = e => {
    if (e) e.preventDefault();
    this.props.onToggle(this.props.style);
  };

  render() {
    let className = `rich-text-editor--style-button rich-text-editor--style-button-${this.props.className}`;
    if (this.props.active) {
      className += ' rich-text-editor--style-button--active';
    }

    return (
      <button type="button" className={className} onMouseDown={this.onToggle}>
        {this.props.label}
      </button>
    );
  }
}
StyleButton.propTypes = {
  active: PropTypes.bool,
  label: PropTypes.node,
  style: PropTypes.string,
  onToggle: PropTypes.func,
  className: PropTypes.string
};
StyleButton.defaultProps = {
  active: false,
  label: null,
  style: null,
  onToggle: null,
  className: null
};
export default StyleButton;
