import ArrowBottomP from '@/components/icons/ArrowBottomP'
import ExportP from '@/components/icons/ExportP'
import SearchD from '@/components/icons/SearchD'
import { Button, ButtonGroup, TextField } from '@mui/material'

function SearchDoctor() {
    return (
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-y-[20px] justify-between mt-[20px] md:mt-[22px] lg:mt-[24px] ">
            <ButtonGroup
                variant="contained"
                className="!bg-[#FFF] lg:!w-[55%] !rounded-[4px] !overflow-hidden 
                flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
            >
                <TextField
                    variant="standard"
                    InputProps={{
                        disableUnderline: true
                    }}
                    sx={{
                        background: 'transparent !important',
                        '& .MuiInputBase-root': { height: '100%' },
                        '& .MuiInput-root': { borderBottom: 'none', },
                        '& .MuiInputBase-input': {
                            background: 'transparent',
                            color: '#7E7E7E',
                            padding: '0'
                        }
                    }}
                    placeholder='جستجو براساس نام پزشک...'
                    dir='rtl'
                    className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
                />
                <Button
                    className="
                    !rounded-[4px] !p-[8px] !w-[56px] !h-[56px] !max-w-[40px] !max-h-[40px] 
                "
                >
                    <SearchD />
                </Button>
            </ButtonGroup>
            <Button
                variant='outlined'
                className='!border-[#5559CE] !flex !text-[14px] md:!text-[16px] !items-center !gap-[4px] md:!gap-[5px] lg:!gap-[6px] !rounded-[4px] !py-[8px] md:!py-[9px] !px-[12px] sm:!px-[14px] md:!px-[16px] lg:!px-[18px]'
            >
                <ExportP />
                خروجی گرفتن
                <ArrowBottomP />
            </Button>
        </div>
    )
}

export default SearchDoctor