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

app/component/DoctorAvatar.js

@@ -0,0 +1,38 @@
+import Image from "next/image";
+import { imageUrl } from "@/helper";
+
+function getInitials(name) {
+  if (!name) return "";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0][0];
+  return `${parts[0][0]}${parts[1][0]}`;
+}
+
+function DoctorAvatar({ doctor, size = 72, className = "", priority = false }) {
+  const url = doctor?.img?.[0]?.url;
+
+  if (!url) {
+    return (
+      <div
+        style={{ width: size, height: size }}
+        className={`flex items-center justify-center rounded-full bg-[#F8F8FF] text-[#3B3B3B] font-bold select-none ${className}`}
+      >
+        <span style={{ fontSize: size * 0.32 }}>{getInitials(doctor?.name)}</span>
+      </div>
+    );
+  }
+
+  return (
+    <Image
+      width={size}
+      height={size}
+      alt="image-doctor"
+      src={imageUrl(url)}
+      className={`object-contain rounded-full ${className}`}
+      priority={priority}
+    />
+  );
+}
+
+export default DoctorAvatar;

app/component/ItemDoctor.js

@@ -1,11 +1,10 @@
 import { memo } from "react";
-import Image from "next/image";
 import { Button } from "@mui/material";
 import Link from "next/link";
 import CustomLoading from "./loading/Custom";
 import TextLoading from "./loading/Text";
 import CircularLoading from "./loading/Circular";
-import { imageUrl } from "@/helper";
+import DoctorAvatar from "./DoctorAvatar";
 
 // Icons
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
@@ -29,12 +28,10 @@ function ItemDoctor({ doctor, loading, setDoctors, priority = false }) {
       {/* Detail Doctor */}
       <div className="flex items-center justify-start gap-2.5">
         <CircularLoading loading={loading} width={66} height={66}>
-          <Image
+          <DoctorAvatar
-            width={72}
+            doctor={doctor}
-            height={72}
+            size={72}
-            alt="image-doctor"
+            className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
-            src={imageUrl(doctor?.img?.[0]?.url)}
-            className="object-contain rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
             priority={priority}
           />
         </CircularLoading>

components/appointment/information/Head.js

@@ -1,10 +1,6 @@
-import Image from "next/image";
+import DoctorAvatar from "@/app/component/DoctorAvatar";
-import { imageUrl } from "@/helper";
 
 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 DoctorAvatar from "@/app/component/DoctorAvatar";
-import { imageUrl } from "@/helper";
 
 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">

components/doctor/detailDoctor/Title.js

@@ -4,23 +4,19 @@ import TextLoading from "@/app/component/loading/Text";
 import LikeDI from "@/components/icons/LikeDI";
 import StarDI from "@/components/icons/StarDI";
 import TickCircle from "@/components/icons/TickCircle";
-import Image from "next/image";
+import DoctorAvatar from "@/app/component/DoctorAvatar";
-import { imageUrl } from "@/helper";
 
 function Title({ doctor }) {
   return (
     <div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
       <CircularLoading width={100} height={100}>
-        <Image
+        <DoctorAvatar
+          doctor={doctor}
+          size={164}
           className="
-            object-contain rounded-full
             w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
             h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
           "
-          src={imageUrl(doctor?.img?.[0]?.url)}
-          alt="img-doctor"
-          height={164}
-          width={164}
         />
       </CircularLoading>
       <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">