<template>
    <div class="chapter-page">
        <div class="chapter-header">
            <h1 class="text-2xl font-bold">
                {{ currentChapter?.title || 'Chargement...' }}
            </h1>
            <div class="chapter-info">
                <span class="text-gray-400"> Chapitre {{ currentChapter?.number }} </span>
            </div>
        </div>

        <div class="reader-container">
            <ChapterReader :chapter-id="chapterId" />
        </div>
    </div>
</template>

<script setup>
    import { computed } from 'vue';
    import { useRoute } from 'vue-router';
    import { useReaderStore } from '../../application/store/readerStore';
    import ChapterReader from '../components/ChapterReader.vue';

    const route = useRoute();
    const store = useReaderStore();

    const chapterId = computed(() => route.params.chapterId);
    const currentChapter = computed(() => store.currentChapter);
</script>

<style lang="postcss" scoped>
    .chapter-page {
        @apply w-full h-full flex flex-col;
    }

    .chapter-header {
        @apply p-4 bg-gray-800 border-b border-gray-700;
    }

    .chapter-info {
        @apply mt-2;
    }

    .reader-container {
        @apply flex-1 overflow-hidden;
    }
</style>
