<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { route } from 'ziggy-js';

defineProps<{
    dynamicId: number;
    participants: Array<{
        id: number;
        name: string;
        pivot: {
            display_name: string | null;
        };
    }>;
}>();
</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"
            >
                <Link
                    :href="route('dynamics.users.show', [dynamicId, participant.id])"
                    class="block"
                >
                    {{ participant.pivot.display_name ?? participant.name }}
                </Link>
            </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;
    color: var(--foreground);
}

.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 p-4;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--foreground);
}
</style>
