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

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
-            width={72}
-            height={72}
-            alt="image-doctor"
-            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]"
+          <DoctorAvatar
+            doctor={doctor}
+            size={72}
+            className="w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
             priority={priority}
           />
         </CircularLoading>