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

components/appointment/location/Address.js

@@ -5,7 +5,7 @@ function Address({ doctor }) {
         <li key={idx}>
           <div className="flex py-[12px] text-[#616161] text-[14px] items-start justify-start">
             <p className="font-bold min-w-[115px]">{`${item.name}: `}</p>
-            <p className="font-normal">{item.location}</p>
+            <p className="font-normal">{item.address || item.location}</p>
           </div>
           {doctor.address.length > idx + 1 && (
             <span className="bg-[#EFEFEF] block h-px w-full"></span>

components/appointment/location/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="flex items-center justify-start gap-[12px]">
       <Image
@@ -8,7 +16,7 @@ function Head({ doctor }) {
                     w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
                     h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
                 "
-        src={doctor?.img}
+        src={doctorImage}
         alt="profile"
         height={56}
         width={56}
@@ -18,7 +26,7 @@ function Head({ doctor }) {
           {doctor?.name}
         </h2>
         <h3 className="text-[#525252] text-[12px] md:text-[14px] font-medium">
-          تخصص: {doctor?.expertise}
+          تخصص: {expertiseText}
         </h3>
       </div>
     </div>