import React, {Component} from 'react'
import classNames from 'classnames/bind'
import {color} from '../common/constants'

let cx = classNames.bind(require('../styles/menu.scss'))

class Menu extends Component {
  render() {
    return (
      <div className={cx('menu')}>
        {this.props.children.map((tab, index) => <Tab key={index} {...tab} />)}
      </div>
    )
  }
}

class Tab extends Component {
  render() {
    return (
      <div className={cx('menu__tab', {'menu__tab_active': this.props.active, 'menu__tab_disabled': this.props.disabled})} onClick={this.props.disabled || !this.props.onClick ? () => {} : this.props.onClick}>
        <div className={cx('menu__tab-content')}>
          <div className={cx('menu__tab-icon')}>
            {this.props.icon}
          </div>
          <div className={cx('menu__tab-label')}>
            {this.props.label}
          </div>
          &nbsp;
        </div>
        <div className={cx('menu__tab-active-indicator')}/>
      </div>
    )
  }
}

export default Menu