import { Tabs, Tab, TabsProps, Box } from "@mui/material";
import { verticalTabStyles } from "../styles";

interface StyledTabsProps extends TabsProps {
  tabItems: { label: string }[];
}

const CustomVerticalTabs = ({ tabItems, ...props }: StyledTabsProps) => {
  const { value, onChange } = props;

  return (
    <Tabs
      value={value}
      onChange={onChange}
      aria-label="vertical-tabs"
      orientation="vertical"
      variant="scrollable"
      sx={verticalTabStyles.mainTabsContainer}
      {...props}
    >
      {tabItems.map((tab, idx) => {
        return (
          <Tab
            key={idx}
            sx={verticalTabStyles.mainTabContainer}
            label={
              <Box sx={verticalTabStyles.mainTabLabel}>
                <span>{tab.label}</span>
              </Box>
            }
          />
        );
      })}
    </Tabs>
  );
};

export default CustomVerticalTabs;