<script setup>
    import { TooltipProvider } from 'reka-ui'
    import { inject } from 'vue';
    const avatar_items = inject('avatar_items');
</script>
<template>
    <div class="flex items-center justify-center gap-4 border rounded-xl p-4 mt-2">
        <TooltipProvider>
            <UAvatarGroup>
                <UTooltip
                    v-for="(item, index) in avatar_items"
                    :key="index"
                    :text="item.hover_alt">
                    <UAvatar
                        :src="item.src"
                        :alt="item.hover_alt"
                        loading="lazy"
                        size="3xl"
                        :chip="{ inset: true, color: item.chip }"
                        />
                </UTooltip>
            </UAvatarGroup>
        </TooltipProvider>
    </div>
</template>