<template>
    <div>
    <Avatar v-for="member in members"
        :key="member.id"
        :user-id="member.id"
        :avatar-url="member.avatar"
        :isMod="member.isMod"
        :isOwner="member.isOwner"
        :isAdmin="member.isAdmin"
        :class="`avatar`"/>
        
    <Circle style="z-index: 10;" class="avatar" v-if="length > 4">+ {{ length - 4}}</Circle>
    </div>
   

</template>
<script setup>
import Avatar from '../UI/Avatar.vue';
import Circle from '../UI/Circle.vue';

const props = defineProps({
    members: {
        type: Array,
        default: () => []
    },  
})

// ne garder que les quatres premiers membres
const length = props.members.length;
const members = props.members.slice(0, 4);

</script>
<style scoped>
div{
  display: flex;
  align-items: center;
}

.avatar {
  margin-left: -10px; /* Ajustez cette valeur pour contrôler le chevauchement */
}
</style>