import SearchHeaderP from "@/components/icons/SearchHeaderP"
import { InputAdornment, TextField } from "@mui/material"

function Search() {
    return (
        <TextField
            placeholder="جستجو"
            fullWidth
            InputProps={{
                startAdornment: (
                    <InputAdornment position="start">
                        <SearchHeaderP />
                    </InputAdornment>
                ),
            }}
            sx={{
                '& .MuiOutlinedInput-input': {
                    paddingTop: '9px !important',
                    paddingBottom: '9px !important'
                },
                '& .MuiFormLabel-root': {
                    top: '-4px !important'
                },
                '& .MuiInputBase-root': {
                    borderRadius: '8px',
                },
                '& .MuiOutlinedInput-input': {
                    paddingTop: '9px !important',
                    paddingBottom: '9px !important'
                },
                '& .MuiOutlinedInput-notchedOutline': {
                    border: '1px solid #EFEFEF !important',
                    transition: '0.3s all !important'
                },
                '& .MuiOutlinedInput-root': {
                    '&.MuiInputBase-root,.MuiFormLabel-root ': {
                        color: '#7E7E7E !important',
                        fontsize: '14px',
                        fontweight: '400',
                    },
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                        border: '1px solid #EFEFEF !important',
                    },
                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                        border: '1px solid #5559CE !important',
                        transition: '0.3s all !important'
                    },
                },
            }}
        />
    )
}

export default Search