import PropTypes from 'prop-types';
import { PureComponent } from 'react';

const iconStyle = {
  height: null,
  lineHeight: '27px',
  width: `${18 * 1.28571429}px`,
};

export default class TextIconButton extends PureComponent {

  static propTypes = {
    label: PropTypes.string.isRequired,
    title: PropTypes.string,
    active: PropTypes.bool,
    onClick: PropTypes.func.isRequired,
    ariaControls: PropTypes.string,
  };

  render () {
    const { label, title, active, ariaControls } = this.props;

    return (
      <button
        type='button'
        title={title}
        aria-label={title}
        className={`text-icon-button ${active ? 'active' : ''}`}
        aria-expanded={active}
        onClick={this.props.onClick}
        aria-controls={ariaControls} style={iconStyle}
      >
        {label}
      </button>
    );
  }

}