import { useSession } from '@/lib/auth-client';
import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
import RoleRing from './RoleRing';

interface AvatarUserProps {
  className?: string;
  textSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
}

const AvatarUser = ({ className, textSize = 'md' }: AvatarUserProps) => {
  const { data: session } = useSession();
  const imagePath = session?.user?.image
    ? `./data/avatar/${session?.user?.image}`
    : undefined;
  const shortName = session?.user?.name
    ?.split(' ')
    .slice(0, 2)
    .map((name) => name[0])
    .join('');

  return (
    <RoleRing type={session?.user?.role}>
      <Avatar className={className}>
        <AvatarImage src={imagePath} />
        <AvatarFallback
          className={cn(
            'bg-orange-400 text-white',
            textSize === 'sm' && 'text-xs',
            textSize === 'md' && 'text-sm',
            textSize === 'lg' && 'text-xl',
            textSize === 'xl' && 'text-2xl',
            textSize === '2xl' && 'text-3xl',
            textSize === '3xl' && 'text-4xl',
          )}
        >
          {shortName}
        </AvatarFallback>
      </Avatar>
    </RoleRing>
  );
};

export default AvatarUser;