change design and responsive & pay & detail account & success pay & faield pay & doctor id

components/account/index.js

@@ -1,15 +1,32 @@
+'use client';
+
+import { useState } from "react";
 import DetailDoctor from "./detailDoctor"
 import Information from "./information";
 
 function AccountPage({ doctor }) {
+
+    const [typePay, setTypePay] = useState('default');
+    const [isPay, setIsPay] = useState(false);
+
     return (
         <div
-            className="padding-responsive pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] 
-            md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
-            flex items-start gap-[24px]"
+            className="padding-responsive pt-[76px] sm:pt-[114px] 
+            md:pt-[152px] lg:pt-[192px] flex-col lg:flex-row
+            flex items-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] 
+            pb-[99px] sm:pb-[129px] md:pb-[80px] lg:pb-[108px]"
         >
-            <DetailDoctor doctor={doctor} />
-            <Information />
+            <DetailDoctor
+                typePay={typePay}
+                doctor={doctor}
+                isPay={isPay}
+            />
+            <Information
+                isPay={isPay}
+                typePay={typePay}
+                setIsPay={setIsPay}
+                setTypePay={setTypePay}
+            />
         </div>
     )
 }