<template>
    <div class="defgtij">
        <div v-for="user in users" :key="user.id" class="avatar-holder">
            <MagAvatar :user="user" class="avatar" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import * as os from "@/os";
import { endpoints, packed } from "magnetar-common";

const props = defineProps<{
    userIds: (string | packed.PackUserBase)[];
}>();

const users = ref<packed.PackUserBase[]>([]);

watch(
    () => props.userIds,
    async (userIds) => {
        users.value = await os
            .magApi(
                endpoints.GetManyUsersById,
                {
                    id: userIds.map((u) => (typeof u === "string" ? u : u.id)),
                },
                {},
            )
            .then((p) => p.filter((u) => u !== null).map((u) => u!));
    },
    { immediate: true, deep: true },
);
</script>

<style lang="scss">
.defgtij {
    padding: 12px;
    grid-gap: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
    place-content: center;

    > .avatar-holder {
        aspect-ratio: 1;

        > .avatar {
            width: 100%;
            height: 100%;
            aspect-ratio: 1;
        }
    }
}
</style>
