import React from "react";
import "./index.less";

export default class SmallTab extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: this.props.items[0]
    };
  }

  render() {
    const { selectedItem } = this.state;
    return (
      <div className="smallTab">
        {
          this.props.items.map(item => (
            <span className={selectedItem.title == item.title ? "tabItem tabItemSelected" : "tabItem"} onClick={() => {
              this.setState({ selectedItem: item });
              this.props.onChange(item);
            }}>{item.title}</span>
          ))
        }
      </div>
    );
  }
}