<template>
    <AvatarRoot class="inline-flex select-none items-center justify-center overflow-hidden align-middle" :class="SIZES[size]">
        <AvatarImage class="h-full w-full object-cover" :src="src" asChild @loading-status-change="(status) => loading = status === 'loading'">
            <img :src="src" />
        </AvatarImage>
        <AvatarFallback :delay-ms="0" class="text-light-100 dark:text-dark-100 leading-1 flex h-full w-full p-4 items-center justify-center bg-light-25 dark:bg-dark-25 font-medium">
            <Loading v-if="loading" />
            <Icon v-else-if="!!icon" :icon="icon" class="w-full h-full" />
            <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, size = 'medium' } = defineProps<{
    src: string
    icon?: string
    text?: string
    size?: keyof typeof SIZES
}>();
const loading = ref(true);
</script>
<script lang="ts">
const SIZES = {
    'small': 'h-6',
    'medium': 'h-10',
    'large': 'h-16',
};
</script>