set data ssr in page booking/slug

app/booking/[slug]/page.js

@@ -1,70 +1,11 @@
-"use client";
-
-import { useState } from "react";
-
-import Layout from "@/components/layout";
-import doctors from "@/data/doctors.json";
-import Date from "@/components/booking/date";
 import BookingPage from "@/components/booking";
-import RegisterPage from "@/components/register";
-import Paying from "@/components/booking/paying";
-import Detail from "@/components/booking/detail";
-import FailedPay from "@/components/booking/failedPay";
-import LogInPage from "@/components/register/LogInPage";
-import SuccessPay from "@/components/booking/successPay";
-import SetCodePage from "@/components/register/SetCodePage";
+import { getStateInfo } from "@/lib/getStateInfo";
 
 function Booking({ params: { slug } }) {
-  const doctor = doctors.find((item) => item.id === +slug);
-
-  const [step, setStep] = useState(0);
-  const [isForAnother, setIsForAnother] = useState(false);
-
-  const [data, setData] = useState({
-    phone: { value: "09121056987", isEdit: true },
-    codemeli: { value: "1741025645", isEdit: true },
-    name: { value: "ساغر صابری نژاد", isEdit: true },
-  });
-
-  const elements = [
-    <Date doctor={doctor} setStep={setStep} />,
-    <LogInPage setIsSendMsg={false} setStep={setStep} />,
-    <SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
-    <Detail
-      isForAnother={isForAnother}
-      setIsForAnother={setIsForAnother}
-      setStep={setStep}
-      data={data}
-      setData={setData}
-    />,
-    <Paying setStep={setStep} />,
-    <SuccessPay setStep={setStep} />,
-    <FailedPay setStep={setStep} />,
-  ];
+  const { matchedCity } = getStateInfo();
 
   return (
-    <>
-      {step === 1 || step === 2 ? (
-        <RegisterPage>{elements[step]}</RegisterPage>
-      ) : (
-        <Layout
-          title="رزرو"
-          name="booking"
-          disableFooter={step > 2}
-          paddingBottom="pb-[80px]"
-        >
-          <BookingPage
-            disableSide={step === 5 || step === 6}
-            isFirst={step === 0}
-            setStep={setStep}
-            doctor={doctor}
-            step={step}
-          >
-            {elements[step]}
-          </BookingPage>
-        </Layout>
-      )}
-    </>
+    <BookingPage slug={slug} matchedCity={matchedCity} />
   );
 }
 

app/component/date/datePicker/NextIconDatePicker.js

@@ -11,6 +11,7 @@ function NextIconDatePicker({ nextIconDatePicker }) {
       <Image
         src="/assets/icons/arrow-right.svg"
         className="icon-left-datepicker"
+        alt="arrow"
         height={24}
         width={24}
       />

app/component/date/datePicker/PrevIconDatePicker.js

@@ -11,6 +11,7 @@ function PrevIconDatePicker({ prevIconDatePicker }) {
       <Image
         src="/assets/icons/arrow-right.svg"
         className="icon-left-datepicker"
+        alt="arrow"
         height={24}
         width={24}
       />