import { Tab as MuiTab, Tabs as MuiTabs } from "@mui/material";
import { styled } from "@mui/material/styles";
import React from "react";
const PREFIX = "Tabs";

const classes = {
    root: `${PREFIX}-root`,
};

const StyledMuiTabs = styled(MuiTabs)(() => ({
    [`&.${classes.root}`]: {
        "&.MuiTabs-vertical": {
            height: "auto",
            minHeight: "auto",
        },
        " & .MuiTabs-scrollable": {
            overflowY: "hidden",
        },
    },
}));

export const Tabs = ({ className = "", ...props }) => {
    return (
        <StyledMuiTabs textColor="primary" indicatorColor="primary" {...props} className={`${classes.root} ${className}`} />
    );
};

const a11yProps = (index) => ({
      id: `simple-tab-${index}`,
      "aria-controls": `simple-tabpanel-${index}`,
});

export const Tab = ({ value, label, ...props }) => (
    <MuiTab key={value} value={value} label={label} {...a11yProps(value)} {...props} />
);