import React from 'react';
import {
  Tab as ReactTab,
  Tabs as ReactTabs,
  TabList as ReactTabList,
  TabPanel as ReactTabPanel,
} from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
import css from './index.module.css';

const Tab = (props): JSX.Element => (
  <ReactTab
    className={css.tab}
    selectedClassName={css.tabSelected}
    {...props}
  />
);
const Tabs = (props): JSX.Element => (
  <ReactTabs className={css.tabs} {...props} />
);
const TabList = (props): JSX.Element => (
  <ReactTabList className={css.tabList} {...props} />
);
const TabPanel = (props): JSX.Element => (
  <ReactTabPanel
    className={css.tabPanel}
    selectedClassName={css.tabPanelSelected}
    {...props}
  />
);

Tab.tabsRole = 'Tab';
Tabs.tabsRole = 'Tabs';
TabList.tabsRole = 'TabList';
TabPanel.tabsRole = 'TabPanel';

export { Tab, Tabs, TabList, TabPanel };