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

import '../base';
import styles from './Tabs.styl';

export default function Tab({ value, children }, { selectedTab, changeSelectedTab }) {
  const classes = classNames({
    [styles.tab]: true,
    [styles.active]: value === selectedTab
  });

  return (
    <div className={classes} onClick={() => changeSelectedTab(value)}>
      {children}
    </div>
  );
}

Tab.contextTypes = {
  selectedTab: PropTypes.string,
  changeSelectedTab: PropTypes.func
};

Tab.propTypes = {
  children: PropTypes.node,
  value: PropTypes.string.isRequired
};

Tab.defaultProps = {
  children: undefined
};