<script setup lang="ts">
// types

type Props = {
    max: number;
    size: string;
    items: string[];
};

// props

const props = defineProps<Props>();

const { items, max } = toRefs(props);

// computed

const displayedAvatars = computed(() => items.value.slice(0, max.value));

const remaining = computed(() => items.value.length - max.value);
</script>

<template>
    <div class="flex items-center">
        <div
            v-if="remaining > 0"
            class="flex-col-center bg-black text-white font-semibold rounded-full text-[10px] z-[1]"
            :style="{ width: size, height: size }"
        >
            +{{ remaining }}
        </div>
        <div
            v-for="(item, index) in displayedAvatars"
            :key="index"
            class="relative bg-gray-400 border border-black rounded-full -ms-2"
            :class="index < 0 ? '' : ''"
            :style="{ width: size, height: size, zIndex: index + 2 }"
        >
            <NuxtImg
                :src="item"
                loading="lazy"
                fetch-priority="low"
                alt="avatar"
                class="rounded-full object-cover w-full h-full"
            />
        </div>
    </div>
</template>
