import { Box, Tab, Tabs as TabsMUI } from "@mui/material";

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}

function Tabs({ value, handleChange, listTab, inactives, isSm, style }) {
  return (
    <Box className="!border-none !w-full">
      <TabsMUI
        value={value}
        onChange={handleChange}
        sx={{
          ...style,
          ".MuiTabs-fixed": {
            overflow: "auto !important",
          },
        }}
      >
        {listTab.map((item, idx) => (
          <Tab
            key={idx}
            label={item}
            disabled={inactives && inactives.includes(idx)}
            {...a11yProps(idx)}
            sx={{
              "&.MuiButtonBase-root": {
                width: !isSm && "fit-content !important",
                minWidth: !isSm && "fit-content !important",
              },
              "&.MuiButtonBase-root:first-child": {
                marginLeft: !isSm && "9px !important",
              },
            }}
            className={`
              text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
              ${isSm ? "!w-1/2 !m-0" : "!mr-[38px]"}
            `}
          />
        ))}
      </TabsMUI>
    </Box>
  );
}

export default Tabs;