import React, { Component, PropTypes } from 'react';

import './Tabs.css';

/**
 * Component to render tabs and only tabs
 */
export default class TabBar extends Component {

  render() {
    if (!this.props.tabs) {
      return null;
    }

    const tabItems = this.props.tabs.map((tab, index) => {
      return (
        <li key={index} className={'ih-background-grey-200 ' + (this.props.initialSelectedIndex === index ? 'active' : '')}>
          <a href={tab.url}>{tab.title}</a>
        </li>
      );
    });

    return (
      <div className="ih-tab-container">
        <nav className="ih-tabs ih-background-grey-200 ih-text-grey-50 simple">
          <ul className="ih-tabs-list ih-row">
            {tabItems}
          </ul>
        </nav>
      </div>
    );
  }
}

TabBar.propTypes = {
  tabs: PropTypes.array.isRequired,
  initialSelectedIndex: PropTypes.number.isRequired,
};