feat: enhance doctor and clinic components with doctorTitle helper and improve rendering logic

components/doctor/detailDoctor/Title.js

@@ -1,3 +1,4 @@
+import { doctorTitle } from "@/helper";
 import CircularLoading from "@/app/component/loading/Circular";
 import CustomLoading from "@/app/component/loading/Custom";
 import TextLoading from "@/app/component/loading/Text";
@@ -35,7 +36,7 @@ function Title({ doctor }) {
         <TextLoading width={90} height={20}>
           <div className="flex items-center gap-2">
             <h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
-              {doctor?.name}
+              {doctorTitle(doctor?.name)}
             </h1>
             {isUnclaimed && (
               <span className="text-[#737373] bg-[#F5F5F5] border border-[#E5E5E5] rounded-full px-2 py-0.5 text-[10px] md:text-[12px] font-medium whitespace-nowrap">