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

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>