<template>
    <div class="ms-2" style="flex: 1">
        <ul class="row gx-1 mb-0 list-inline">
            <li class="col-4 me-0" v-for="(member, index) in members" :key="index">
                <div class="ratio ratio-1x1 mb-0">
                    <img
                        :src="`${profileImgUrl}profile/${member.MEMBERPRF}`"
                        :style="`border-color: ${member.usercolor} !important;`"
                        alt="User Profile"
                        class="rounded-circle border border-2"
                        @error="$event.target.src = '/img/icons/icon.png'"
                    />
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
    const props = defineProps({
        members: {
            type: Array,
            required: true,
        },
        baseUrl: {
            type: String,
            required: true,
        },
    });

    const profileImgUrl = import.meta.env.VITE_SERVER_IMG_URL;
</script>
