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/home/search/Fields.js

@@ -2,16 +2,18 @@
 
 import { useState } from "react";
 
-import FilterText from "./FilterText";
 import RedirectLink from "./RedirectLink";
 import ModalSearchCity from "./modal";
 import ButtonFilter from "./modal/ButtonFilter";
+import specialtiesData from "@/data/specialties.json";
+import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
 
 function Fields({ city, state }) {
   const [open, setOpen] = useState(false);
   const [data, setData] = useState({
     province: state?.name || "",
     city: city?.name || "",
+    search: "",
   });
 
   return (
@@ -26,7 +28,14 @@ function Fields({ city, state }) {
         <ButtonFilter setOpen={setOpen} selected={data} />
       </ModalSearchCity>
       <span className="black w-px bg-[#EFEFEF]"></span>
-      <FilterText data={data} setData={setData} />
+      <div className=" !w-full lg:!w-[524px]">
+        <AutoCompleteSearch
+          data={specialtiesData}
+          inputValue={data.search}
+          handleSearch={(e) => setData({ data, search: e })}
+          placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
+        />
+      </div>
       <RedirectLink data={data} />
     </>
   );