<template>
  <UAvatar
    v-bind="forwardedProps"
    :src="src ?? undefined"
    :alt="name ?? undefined"
    :icon="icon"
  />
</template>

<script setup lang="ts">
import type { AvatarProps } from '@nuxt/ui'

const forwardedProps = defineProps<Omit<AvatarProps, 'src' | 'alt' | 'icon'>>()

const { name, src } = storeToRefs(useAvatar())

// show initials if name is present, otherwise show icon
const icon = computed(() => {
  return !name.value ? 'i-lucide-user' : undefined
})
</script>
