<script lang="ts">
  import { getAvatarUrl as generateAvatarUrl } from "$lib/utils/avatarGenerator";
  
  interface Props {
    avatar?: string;
    fotoPerfilUrl?: string | null;
    nome: string;
    size?: "xs" | "sm" | "md" | "lg";
  }

  let { avatar, fotoPerfilUrl, nome, size = "md" }: Props = $props();

  const sizeClasses = {
    xs: "w-8 h-8",
    sm: "w-10 h-10",
    md: "w-12 h-12",
    lg: "w-16 h-16",
  };

  function getAvatarUrl(avatarId: string): string {
    // Usar gerador local ao invés da API externa
    return generateAvatarUrl(avatarId);
  }

  const avatarUrlToShow = $derived(() => {
    if (fotoPerfilUrl) return fotoPerfilUrl;
    if (avatar) return getAvatarUrl(avatar);
    return getAvatarUrl(nome); // Fallback usando o nome
  });
</script>

<div class="avatar">
  <div class={`${sizeClasses[size]} rounded-full bg-base-200 overflow-hidden`}>
    <img 
      src={avatarUrlToShow()} 
      alt={`Avatar de ${nome}`}
      class="w-full h-full object-cover"
    />
  </div>
</div>

