import { Button, ButtonGroup, TextField } from '@mui/material';
import SearchD from '@/components/icons/SearchD';
import ModalSearchCity from './modal';

function SearchBar() {
    return (
        <ButtonGroup
            variant="contained"
            className="
            !bg-[#FFF] !w-2/3 !mt-[30px] !rounded-lg !overflow-hidden flex items-center 
            !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
            !h-fit !pl-1"
        >
            <ModalSearchCity />
            <TextField
                variant="standard"
                InputProps={{
                    disableUnderline: true
                }}
                sx={{
                    background: 'transparent !important',
                    '& .MuiInputBase-input': { color: '#7E7E7E' },
                    '& .MuiInput-root': { borderBottom: 'none' },
                    '& .MuiInputBase-root': { height: '100%' }
                }}
                placeholder="جستجوی تخصص"
                dir='rtl'
                className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
            />
            <Button
                className="
                    !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !min-w-fit
                    !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
                    !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
                "
            >
                <SearchD />
            </Button>
        </ButtonGroup>
    )
}

export default SearchBar