feat(doctor-avatar): enhance DoctorAvatar component with initials formatting and integrate into ItemAppointment

components/doctor/appointmentList/ItemAppointment.js

@@ -3,9 +3,8 @@ import TextLoading from "@/app/component/loading/Text";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import GreenCalendarTurn from "@/components/icons/GreenCalendarTurn";
 import { Button } from "@mui/material";
-import Image from "next/image";
 import Link from "next/link";
-import { imageUrl } from "@/helper";
+import DoctorAvatar from "@/app/component/DoctorAvatar";
 
 function ItemAppointment({ turn, loading, doctorSlug }) {
   return (
@@ -17,13 +16,7 @@ function ItemAppointment({ turn, loading, doctorSlug }) {
       <span className="block w-full h-px bg-[#EFEFEF] my-4"></span>
       <div className="flex items-center justify-start gap-3">
         <CircularLoading width={56} height={56} loading={loading}>
-          <Image
-            className="rounded-full"
-            width={56}
-            height={56}
-            alt="doctor"
-            src={imageUrl(turn?.img?.[0]?.url)}
-          />
+          <DoctorAvatar doctor={turn} size={56} />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
           <TextLoading width={60} height={15} loading={loading}>