import React from 'react';
import { TabCount } from 'plugin-api/beta/client/components/ui';
import InfoIcon from './InfoIcon';
import { t } from 'plugin-api/beta/client/services';
import Tooltip from './Tooltip';
import PropTypes from 'prop-types';

const Tab = ({ active, hover, featuredCommentsCount }) => {
  return (
    <span>
      {t('talk-plugin-featured-comments.featured')}
      <TabCount active={active} sub>
        {featuredCommentsCount}
      </TabCount>
      <InfoIcon hover={hover} />
      {hover && <Tooltip />}
    </span>
  );
};

Tab.propTypes = {
  active: PropTypes.bool,
  hover: PropTypes.bool,
  featuredCommentsCount: PropTypes.number.isRequired,
};

export default Tab;