add auto-selecotr to home page and handle set in data, search in specialties and send req for filter && add locations and change text

components/doctors/search/SearchField.js

@@ -1,33 +1,16 @@
-import { TextField } from "@mui/material";
-import React from "react";
+import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
+import specialties from "@/data/specialties.json";
 
 function SearchField({ filter, updateData }) {
   return (
-    <TextField
-      variant="standard"
-      value={filter.name}
-      onChange={(e) => updateData("name", e.target.value)}
-      InputProps={{
-        disableUnderline: true,
-      }}
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        width: "100% !important",
-        "& .MuiInput-root": {
-          padding: "0",
-          borderBottom: "none",
-        },
-        "& .MuiInputBase-input": {
-          color: "#6C757D",
-          padding: "0px",
-        },
-      }}
-      dir="rtl"
-      placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
-      className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
-    />
+    <div className="!min-w-[50%] !w-[524px]">
+      <AutoCompleteSearch
+        data={specialties}
+        inputValue={filter.name}
+        handleSearch={(e) => updateData("name", e)}
+        placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
+      />
+    </div>
   );
 }