import React from 'react';
import PropTypes from 'prop-types';
import styles from './tab.module.scss';

const Tab = ({
  label,
  onClick,
  activeTab,
  activeTabClass = '',
  tabId,
  toggleDropdown,
  gtmClass = '',
}) => {
  let className = '';

  if (activeTab === tabId) {
    if (activeTabClass !== '') {
      className = ` ${styles[activeTabClass]}`;
    } else {
      className = ` ${styles.active}`;
    }
  }

  return (
    <li className={styles.tabListItem || ''}>
      <button
        className={`${className || ''} ${gtmClass || ''} tabs-menu-gtm btn-cta`}
        type="button"
        onClick={() => {
          onClick(tabId);
          toggleDropdown();
        }}
      >
        {label}
      </button>
    </li>
  );
};
Tab.propTypes = {
  onClick: PropTypes.func,
  toggleDropdown: PropTypes.func,
  activeTab: PropTypes.string,
  activeTabClass: PropTypes.string,
  tabId: PropTypes.string,
  label: PropTypes.string,
  gtmClass: PropTypes.string,
};

export default Tab;
