import { FC } from 'react';

import Box, { BoxProps } from '@material-hu/mui/Box';

import { default as Scrollbar, ScrollbarProps } from 'src/components/Scrollbar';

export type TabPanelProps = BoxProps &
  ScrollbarProps & {
    id: string;
    value: number | string;
    index: number | string;
    withScrollbar?: boolean;
  };

const TabPanel: FC<React.PropsWithChildren<TabPanelProps>> = props => {
  const { id, children, value, index, withScrollbar = false, ...other } = props;

  return (
    <Box
      role="tabpanel"
      component={withScrollbar ? Scrollbar : undefined}
      hidden={value !== index}
      id={`${id}-tabpanel-${index}`}
      aria-labelledby={`${id}-tab-${index}`}
      {...other}
    >
      {value === index && children}
    </Box>
  );
};

export default TabPanel;