import PlayPause from 'react-video-icons/play-pause';

export default class MyButton extends React.Component {


  constructor(props) {
    super(props);

    this.state = this.__getInitialState();
  }


  __getInitialState() {
    return { isPlay: false }
  }


  _handleClick() {
    // Click actions should here
    this.setState({ isPlay: !(this.state.isPlay) });
  }


  render() {
    return(
      <button
        type="button"
        onClick={ () => this._handleClick() }
      >
        <PlayPause play={ this.state.isPlay } />
      </button>
    );
  }


}

PlayPause.propTypes = {
  play: PropTypes.bool.isRequired,  // Flag to toggle icon between play or pause
  initialMode: PropTypes.string,    // play or pause
  width: PropTypes.number,          // SVG elements width
  height: PropTypes.number,         // SVG elements height
  fill: PropTypes.string,           // icon fill color
  stroke: PropTypes.string,         // icon stroke width
  strokeOpacity: PropTypes.string,  // icon stroke opacity
  style: PropTypes.object           // css styles for SVG element
}