import React from 'react';
import {BaseComponent} from 'frill-core';
import TopCounter from '../Mediators/TopCounter.jsx';
import TopScrollBlock from '../Mediators/TopScrollBlock.jsx';
// import CounterBlock from '../UI/CounterBlock.jsx';

/**
 * Top Page component
 * @extends {FrillCore.BaseComponent}
 * @example <caption>Usage in React-Router</caption>
 * <Route name="top" path="/" handler={TopComponent} />
 */
class TopPage extends BaseComponent {

  /**
   * Constructor
   * @param {any} props
   */
  constructor(props) {
    super(props);
  }

  /**
   * render
   * @return {React DOM}
   * @see https://facebook.github.io/react/docs/component-specs.html#render
   */
  render() {
    return (
      <div className="Top">
        <h2 className="heading">Examples</h2>
        <section>
          <h3 className="heading">Button - counter</h3>
          <TopCounter {...this.props} />
        </section>
        <section>
          <h3 className="heading">Infinite Scroll</h3>
          <TopScrollBlock {...this.props} />
        </section>
      </div>
    );
  }
}

/**
 * Export TopPage
 */
export default TopPage;