import React from 'react';

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

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

  /**
   * render
   * @return {React DOM}
   * @see https://facebook.github.io/react/docs/component-specs.html#render
   */
  render() {
    const items = [];

    this.props.items.map((item) => {
      items.push(
        <li key={item.id}>
          <p>ID : {item.id}</p>
          <p>title : {item.title}</p>
        </li>
      );
    });

    return (
      <ul className="ScrollList">
        {items}
      </ul>
    );
  }
}

/**
 * PropTypes
 */
ScrollListUI.propTypes = {
  // array of list items
  items: React.PropTypes.array,
};

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