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

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 { imageUrl } from "@/helper";
+import DoctorAvatar from "@/app/component/DoctorAvatar";
 
 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]">