send data location with url to doctors and get it and show in page doctors

components/doctors/index.js

@@ -5,9 +5,15 @@ import SearchBar from "./search";
 import SortList from "./sortlist";
 import ListDoctors from "./listDoctors";
 import LocationD from "../icons/LocationD";
+import { useSearchParams } from "next/navigation";
 
 function DoctorsPage() {
   const [loading, setLoading] = useState(true);
+  const searchParams = useSearchParams();
+  const locationSelected = {
+    province: searchParams.get("province"),
+    city: searchParams.get("city"),
+  };
   const [data, setData] = useState({
     expertise: "",
     gender: 0,
@@ -27,14 +33,16 @@ function DoctorsPage() {
         <div className="flex items-center justify-start gap-2 w-full">
           <LocationD />
           <p className="text-[#525252] text-[16px] font-semibold">
-            خوزستان / اهواز
+            {" "}
+            {locationSelected.province || "استان"} /{" "}
+            {locationSelected.city || "شهر"}
           </p>
         </div>
         <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
           <SearchBar data={data} setData={setData} />
           <SortList data={data} setData={setData} />
         </div>
-      </div> 
+      </div>
       <ListDoctors loading={loading} />
     </div>
   );