<script setup lang="ts">
defineProps<{
    participants: Array<{
        id: number;
        name: string;
    }>;
}>();
</script>

<template>
    <div class="c-participants-list">
        <h4 class="c-participants-list__title">Participants</h4>
        <ul class="c-participants-list__grid">
            <li
                v-for="participant in participants"
                :key="participant.id"
                class="c-participants-list__item"
            >
                {{ participant.name }}
            </li>
        </ul>
    </div>
</template>

<style scoped>
@reference "../../css/app.css";

.c-participants-list {
    @apply mt-8;
}

.c-participants-list__title {
    @apply text-lg font-medium text-gray-900 dark:text-gray-100;
}

.c-participants-list__grid {
    @apply mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3;
}

.c-participants-list__item {
    @apply overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800;
}
</style>
