feat(avatar): create DoctorAvatar component for improved doctor image handling

components/appointment/information/Head.js

@@ -1,10 +1,6 @@
-import Image from "next/image";
-import { imageUrl } from "@/helper";
+import DoctorAvatar from "@/app/component/DoctorAvatar";
 
 function Head({ doctor }) {
-  // تبدیل img array به string
-  const doctorImage = imageUrl(doctor?.img?.[0]?.url, "/assets/images/doctor.png");
-
   // تبدیل specialties array به string
   const expertiseText = doctor?.specialties
     ?.map((exp) => exp.name)
@@ -19,15 +15,13 @@ function Head({ doctor }) {
             mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px]
         "
     >
-      <Image
+      <DoctorAvatar
+        doctor={doctor}
+        size={95}
         className="
                     w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
                     h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
                 "
-        alt="profile doctor"
-        src={doctorImage}
-        height={95}
-        width={95}
       />
       <div className="flex flex-col items-start justify-center gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px]">
         <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">

components/appointment/location/Head.js

@@ -1,10 +1,6 @@
-import Image from "next/image";
-import { imageUrl } from "@/helper";
+import DoctorAvatar from "@/app/component/DoctorAvatar";
 
 function Head({ doctor }) {
-  // تبدیل img array به string
-  const doctorImage = imageUrl(doctor?.img?.[0]?.url, "/assets/images/doctor.png");
-
   // تبدیل specialties array به string
   const expertiseText = doctor?.specialties
     ?.map((exp) => exp.name)
@@ -12,15 +8,13 @@ function Head({ doctor }) {
 
   return (
     <div className="flex items-center justify-start gap-[12px]">
-      <Image
+      <DoctorAvatar
+        doctor={doctor}
+        size={56}
         className="
                     w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
                     h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
                 "
-        src={doctorImage}
-        alt="profile"
-        height={56}
-        width={56}
       />
       <div className="flex flex-col items-start justify-start gap-[8px]">
         <h2 className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">