import React from 'react';
import PropTypes from 'prop-types';

class Tab extends React.Component {
  static propTypes = {
    activeTab: PropTypes.any.isRequired,
    className: PropTypes.string,
    label: PropTypes.any.isRequired,
    onClick: PropTypes.func.isRequired,
  };

  onClick = () => {
    const { label, onClick } = this.props;
    onClick(label);
  };

  render() {
    const {
      onClick,
      props: { activeTab, label },
    } = this;

    let className = 'Tabs-listItem';
    if (activeTab === label) className += ' Tabs-listItem_active';

    return (
      <li className={className} onClick={onClick} onKeyDown={onClick}>
        {label}
      </li>
    );
  }
}

export default Tab;
