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, 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}
                        {...a11yProps(idx)}
                        className={`
                            text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
                            ${isSm ? '!w-1/2 !m-0' : '!mr-2'}
                        `}
                    />
                ))}
            </TabsMUI>
        </Box>
    )
}

export default Tabs