<template>
    <AvatarRoot class="inline-flex h-12 w-12 select-none items-center justify-center overflow-hidden align-middle">
        <AvatarImage class="h-full w-full object-cover" :src="src" asChild>
            <img :src="src" />
        </AvatarImage>
        <AvatarFallback :delay-ms="0" class="text-light-100 dark:text-dark-100 leading-1 flex h-full w-full items-center justify-center bg-light-25 dark:bg-dark-25 font-medium">
            <Icon v-if="!!icon" :icon="icon" class="w-8 h-8" />
            <span v-else-if="!!text">{{ text }}</span>
        </AvatarFallback>
    </AvatarRoot>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
const { src, icon, text } = defineProps<{
    src: string
    icon?: string
    text?: string
}>(); 
</script>