<script setup lang="ts">
import Badge from "@/components/Badge.vue";
import User from "@/components/User.vue";
import { Address } from "@/store/models/model";
import { defineProps, PropType } from "vue";

const props = defineProps({ type: String, members: Object as PropType<Address[]> });
// const members: Address[] = [];

// for (let i = 0; i < 4; i++) {
//     if (!props.members) continue;
//     members?.push(props?.members[0]);
// }
// todo deal with long list and responsive
</script>

<template>
    <div class="main">
        <Badge :value="props.type + ': '" />
        <div class="users">
            <User class="user" v-for="(member, index) in props?.members" :key="index" :address="member" />
        </div>
    </div>
</template>

<style scoped>
.main {
    display: flex;
}
.users {
    display: flex;
}

.user {
    margin-left: 5px;
}
</style>
