import Tabs from '@/app/component/Tabs';
import { Button } from '@mui/material'

const listTab = ['نوبت های جاری', 'نوبت های انجام شده'];

function Head({ value, setValue, handleChange }) {
    return (
        <div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
            <div className='block w-full lg:hidden'>
                <Tabs
                    style={{
                        '.MuiTabs-indicator': {
                            height: '2px',
                            borderRadius: '16px',
                            background: '#5559CE',
                        },
                        '& .MuiButtonBase-root': {
                            color: '#7E7E7E',
                            fontSize: '14px',
                            fontStyle: 'normal',
                            fontWeight: '700'
                        },
                        '& .MuiTabs-flexContainer': {
                            paddingRight: '15px',
                            paddingLeft: '15px',
                        },
                        '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
                            color: '#5559CE !important'
                        },
                        '& .MuiButtonBase-root.Mui-selected': {
                            color: '#5559CE !important'
                        }
                    }}
                    value={value}
                    color='#5559CE'
                    listTab={listTab}
                    handleChange={handleChange}
                />
            </div>
            <Button
                className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium'
                variant='contained'
            >
                نوبت های جاری
            </Button>
            <Button
                className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium'
                variant='outlined'
            >
                نوبت های انجام شده
            </Button>
        </div>
    )
}

export default Head