refactor: update appointment components to fetch and handle doctor data and disabled dates

components/appointment/information/Detail.js

@@ -6,6 +6,9 @@ import TickCircleOrange from "@/components/icons/TickCircleOrange";
 import { Button } from "@mui/material";
 
 function Detail({ doctor, step, setStep }) {
+  // دریافت اولین آدرس از لیست
+  const firstAddress = doctor?.address?.[0]?.address || doctor?.location || "آدرس موجود نیست";
+
   return (
     <div className="">
       <ul className="flex flex-col items-start justify-start gap-[24px]">
@@ -14,7 +17,7 @@ function Detail({ doctor, step, setStep }) {
             <LocationA />
           </div>
           <p className="text-[#616161] text-[14px] md:text-[16px] font-normal">
-            آدرس: {doctor?.location}
+            آدرس: {firstAddress}
           </p>
         </li>
         <li className="flex items-center justify-between w-full">

components/appointment/information/Head.js

@@ -1,6 +1,14 @@
 import Image from "next/image";
 
 function Head({ doctor }) {
+  // تبدیل img array به string
+  const doctorImage = doctor?.img?.[0]?.url || "/default-doctor.jpg";
+
+  // تبدیل expertise array به string
+  const expertiseText = doctor?.expertise
+    ?.map((exp) => exp.name)
+    .join("، ") || "";
+
   return (
     <div
       className="
@@ -16,7 +24,7 @@ function Head({ doctor }) {
                     h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
                 "
         alt="profile doctor"
-        src={doctor?.img}
+        src={doctorImage}
         height={95}
         width={95}
       />
@@ -25,7 +33,7 @@ function Head({ doctor }) {
           {doctor?.name}
         </p>
         <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
-          تخصص: {doctor?.expertise}
+          تخصص: {expertiseText}
         </p>
       </div>
     </div>