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

function Search() {
  return (
    <TextField
      fullWidth
      placeholder="جستجو"
      className="!hidden md:!flex"
      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;