import clsx from 'clsx';
import React from 'react';
import {
  ReactTabsFunctionComponent,
  TabPanel,
  TabPanelProps,
} from 'react-tabs';
import { FormGrid } from '../../FormStation';
import { FormGridProps } from '../../FormStation/FormGrid';
import classes from './CustomTabPanel.scss';

interface CustomTabPanelProps extends TabPanelProps, FormGridProps {}

export const CustomTabPanel: ReactTabsFunctionComponent<
  CustomTabPanelProps
> = ({
  children,
  className,
  selectedClassName,
  edgeToEdgeContent,
  ...otherProps
}) => (
  <TabPanel
    {...otherProps}
    className={clsx(className, classes.tabpanel)}
    selectedClassName={clsx(selectedClassName, classes.selected)}
    data-test-id="tab"
  >
    <FormGrid edgeToEdgeContent={edgeToEdgeContent}>{children}</FormGrid>
  </TabPanel>
);

CustomTabPanel.tabsRole = 'TabPanel';
