change design all page & component page booking and account & cleancode

app/booking/[slug]/page.js

@@ -1,17 +1,65 @@
-import BookingPage from '@/components/booking';
+'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 SetCodePage from '@/components/register/SetCodePage';
+import Paying from '@/components/booking/paying';
+import LogInPage from '@/components/register/LogInPage';
+import SuccessPay from '@/components/booking/successPay';
+import FailedPay from '@/components/booking/failedPay';
+import Detail from '@/components/booking/detail';
 
 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: false },
+        codemeli: { value: '1741025645', isEdit: false },
+        name: { value: 'ساغر صابری نژاد', isEdit: false }
+    });
+
+    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} />
+    ]
+
     return (
-        <Layout title='رزرو' name='booking'>
-            <BookingPage
-                doctor={doctor}
-            />
-        </Layout>
+        <>
+            {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}
+                        doctor={doctor}
+                    >
+                        {elements[step]}
+                    </BookingPage>
+                </Layout>
+            )}
+        </>
     )
 }