import { cn } from '@lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '@ui/avatar';
import { useAuth } from '../auth/auth-provider';
import RoleRing from './role-ring';

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

const AvatarUser = ({ className, textSize = 'md' }: AvatarUserProps) => {
  const { session } = useAuth();
  const imagePath = session?.user?.image
    ? new URL(`../../../data/avatar/${session?.user?.image}`, import.meta.url)
        .href
    : 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} title={shortName} />
        <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;
