import React from 'react';

/**
 * CounterBlock UI component
 * @extends {React.Component}
 * @example <caption>Usage in React component</caption>
 * <ScrollList items={...} />
 */
class CounterBlockUI extends React.Component {
  /**
   * Constructor
   * @param {any} props
   */
  constructor(props) {
    super(props);

    /**
     * Name of component
     */
    this.name = 'CounterBlock';
  }

  /**
   * render
   * @return {React DOM}
   * @see https://facebook.github.io/react/docs/component-specs.html#render
   */
  render() {
    return (
      <div className="CounterBlock">
        <p className="CounterBlock-count">{this.props.count}</p>
        <button key="onone-btn" onClick={this.props.onOne}>+1</button>
        <button key="onten-btn" onClick={this.props.onTen}>+10</button>
      </div>
    );
  }
}

/**
 * PropTypes
 */
CounterBlockUI.propTypes = {
  // array of list items
  count: React.PropTypes.number,
  // parent's onOne() method
  onOne: React.PropTypes.func,
  // parent's onTen() method
  onTen: React.PropTypes.func,
};

/**
* Export ScrollListUI
*/
export default CounterBlockUI;