import React from 'react';
import {__} from "@wordpress/i18n";

export default class Helper extends React.Component {

  constructor(props) {
    super(props);
  }

  classes() {

    const {className, processing} = this.props;

    let classes = ['ra-helper'];
    if (className) {
      classes.push(className);
    }

    if (processing) {
      classes.push('processing');
    }

    return classes.join(' ');

  }

  render() {
    return (
      <div className={this.classes()}>
        <span className="ra-helper-text" dangerouslySetInnerHTML={{__html: this.props.children}}/>
        {'\u00A0'}
        <span>
          {
            this.props.showReset && (
              <button
                className="ra-button-reset"
                onClick={this.props.onReset}
                disabled={this.props.processing}
              >
                {__('Reset', 'readabler-assistant')}
              </button>
            )
          }
        </span>
      </div>
    );
  }

}