import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

/**
 * tab item
 *
 * @class TabItem
 * @extends {Component}
 */
class TabItem extends Component {

  static propTypes = {
    itemKey: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number
    ]),
    text: PropTypes.string,
    count: PropTypes.number,
    active: PropTypes.bool,
    onTabChange: PropTypes.func
  };

  static defaultProps = {
    active: false,
    onTabChange(){}
  };

  render() {
    const { itemKey, text, count, active, onTabChange } = this.props;
    const cls = classnames({
      'amos-hover-motion': true,
      'tab-item': true,
      'tab-active': active
    });
    return (
      <li className={cls} onClick={(e) => onTabChange(itemKey)}>
        <span className="tab-name" title={text}>{text}</span>
        <span className="tab-count">{count}</span>
      </li>
    );
  }
}

export default TabItem;
