Just making a mess mostly I think

src/components/default/profile/AvatarUpload.tsx

@@ -1,19 +1,17 @@
 import { useFileUpload } from '@/lib/hooks/useFileUpload';
 import { useAuth } from '@/components/context';
 import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
+  BasedAvatar,
   CardContent,
 } from '@/components/ui';
-import { Loader2, Pencil, Upload, User } from 'lucide-react';
+import { Loader2, Pencil, Upload } from 'lucide-react';
 
 type AvatarUploadProps = {
   onAvatarUploaded: (path: string) => Promise<void>;
 };
 
 export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
-  const { profile, avatarUrl } = useAuth();
+  const { profile } = useAuth();
   const { isUploading, fileInputRef, uploadToStorage } = useFileUpload();
 
   const handleAvatarClick = () => {
@@ -40,15 +38,6 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
     }
   };
 
-  const getInitials = (name: string | null | undefined): string => {
-    if (!name) return '';
-    return name
-      .split(' ')
-      .map((n) => n[0])
-      .join('')
-      .toUpperCase();
-  };
-
   return (
     <CardContent>
       <div className='flex flex-col items-center'>
@@ -56,24 +45,13 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
           className='relative group cursor-pointer mb-4'
           onClick={handleAvatarClick}
         >
-          <Avatar className='h-32 w-32'>
-            {avatarUrl ? (
-              <AvatarImage
-                src={avatarUrl}
-                alt={getInitials(profile?.full_name)}
-                width={128}
-                height={128}
-              />
-            ) : (
-              <AvatarFallback className='text-4xl'>
-                {profile?.full_name ? (
-                  getInitials(profile.full_name)
-                ) : (
-                  <User size={32} />
-                )}
-              </AvatarFallback>
-            )}
-          </Avatar>
+          <BasedAvatar
+            src={profile?.avatar_url}
+            fullName={profile?.full_name}
+            className='h-32 w-32'
+            fallbackClassName='text-4xl font-semibold'
+            userIconSize={100}
+          />
           <div
             className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
               transition-all flex items-center justify-center'