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

function SmSearch({ placeholder }) {
    return (
        <ButtonGroup
            variant="contained"
            className="!bg-[#FFF] !w-full lg:!w-2/3 !mt-[15px] !rounded-lg !overflow-hidden 
            flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
            !h-fit !p-1"
        >
            <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={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] !gap-2.5 !p-2 md:!p-3 lg:!p-4
                    !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 SmSearch