update modals & text & design

components/home/search/index.js

@@ -5,15 +5,36 @@ import { Button, ButtonGroup, TextField } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
 import ModalSearchCity from "@/app/component/modalSearchCity";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import Link from "next/link";
 
+import statesData from "@/data/state.json";
+import citiesData from "@/data/city.json";
+
+const provinceIdMap = Object.fromEntries(
+  statesData.map((state) => [state.name, state.id])
+);
+const citiesByProvinceId = citiesData.reduce((acc, city) => {
+  if (!acc[city.province_id]) acc[city.province_id] = [];
+  acc[city.province_id].push(city);
+  return acc;
+}, {});
+
 function SearchBar() {
   const [selected, setSelected] = useState({
     province: "",
     city: "",
   });
   const [open, setOpen] = useState(false);
+  const getDefaultCityForProvince = useCallback((provinceName) => {
+    if (!provinceName) return undefined;
+    const provinceId = provinceIdMap[provinceName];
+    return citiesByProvinceId[provinceId]?.[0]?.name;
+  }, []);
+  console.log(getDefaultCityForProvince(selected.province));
+  console.log(selected.province);
+
+
 
   return (
     <ButtonGroup
@@ -59,7 +80,7 @@ function SearchBar() {
           pathname: "/doctors",
           query: {
             province: selected.province,
-            city: selected.city,
+            city: selected.city || getDefaultCityForProvince(selected.province),
           },
         }}
       >