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

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

const listTab = ['درباره کلینیک', 'اطلاعات تماس', 'پزشک ها'];

function Tabs({ value, handleChange }) {
    return (
        <Box
            className="!border-none"
        >
            <TabsMUI
                value={value}
                onChange={handleChange}
                sx={{
                    '.MuiTabs-fixed': {
                        overflow: 'auto !important'
                    },
                    '.MuiTabs-indicator': {
                        height: '2px',
                        borderRadius: '10px',
                        background: '#F17732'
                    },
                    '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
                        color: '#F17732 !important'
                    }
                }}
            >
                {listTab.map((item, idx) => (
                    <Tab
                        key={idx}
                        label={item}
                        {...a11yProps(idx)}
                        className="text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold !mr-2"
                    />
                ))}
            </TabsMUI>
        </Box>
    )
}

export default Tabs