<template>
    <div class="p-2 border-t dark:border-gray-700">
        <table class="min-w-full table-auto">
            <thead>
                <tr class="text-gray-700 dark:text-gray-300">
                    <th class="px-4 py-2 text-left">#</th>
                    <th class="px-4 py-2 text-left">Titre</th>
                    <th class="px-4 py-2 text-right">Actions</th>
                </tr>
            </thead>
            <tbody>
                <MangaChapter
                    v-for="chapter in chapters"
                    :key="chapter.id"
                    :chapter="chapter"
                    :manga-slug="mangaSlug"
                    :manga-id="mangaId" />
            </tbody>
        </table>
    </div>
</template>

<script setup>
    import MangaChapter from './MangaChapter.vue';

    defineProps({
        chapters: {
            type: Array,
            required: true
        },
        mangaSlug: {
            type: String,
            required: true
        },
        mangaId: {
            type: Number,
            required: true
        }
    });
</script>
