change design and data list in doctor-item & handle component appointment in doctor-item & handle functionality date-picker & fix bug appointment page & add req get appointment list

components/doctor/detailDoctor/Title.js

@@ -15,7 +15,7 @@ function Title({ doctor }) {
                     w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
                     h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
                 "
-          src={doctor?.img}
+          src={doctor?.img[0]?.url}
           alt="img-doctor"
           height={164}
           width={164}
@@ -24,12 +24,16 @@ function Title({ doctor }) {
       <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
         <TextLoading width={90} height={20}>
           <h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
-            {doctor?.title}
+            {doctor?.name}
           </h1>
         </TextLoading>
         <TextLoading width={100} height={20}>
           <h3 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
-            تخصص: {doctor?.expertise}
+            تخصص:
+            {doctor?.expertise?.map(
+              (item, idx) =>
+                `${item.name} ${doctor.expertise.length === idx + 1 ? "" : "|"} `
+            )}
           </h3>
         </TextLoading>
         <div className="flex items-center justify-start gap-11">