<template>
    <div class="reader-controls">
        <button @click="onPrevious" :disabled="isFirstPage">
            <ChevronLeftIcon class="h-6 w-6" />
        </button>

        <div class="controls-center">
            <div class="page-info"> {{ currentPage + 1 }} / {{ totalPages }} </div>
            <div class="chapter-selector-wrapper" v-if="availableChapters.length > 0">
                <ChapterSelector
                    :available-chapters="availableChapters"
                    @chapter-selected="onChapterSelected"
                />
            </div>
        </div>

        <button @click="onNext" :disabled="isLastPage">
            <ChevronRightIcon class="h-6 w-6" />
        </button>
    </div>
</template>

<script setup>
    import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
import ChapterSelector from './ChapterSelector.vue';

    defineProps({
        currentPage: {
            type: Number,
            required: true
        },
        totalPages: {
            type: Number,
            required: true
        },
        isFirstPage: {
            type: Boolean,
            required: true
        },
        isLastPage: {
            type: Boolean,
            required: true
        },
        availableChapters: {
            type: Array,
            default: () => []
        }
    });

    const emit = defineEmits(['previous', 'next', 'chapter-selected']);

    const onPrevious = () => emit('previous');
    const onNext = () => emit('next');
    const onChapterSelected = (chapterId) => emit('chapter-selected', chapterId);
</script>

<style lang="postcss" scoped>
    .reader-controls {
        @apply flex items-center justify-between p-4 bg-gray-800;
    }

    .controls-center {
        @apply flex flex-col items-center space-y-2;
    }

    .page-info {
        @apply text-lg font-medium;
    }

    .chapter-selector-wrapper {
        @apply min-w-[200px];
    }

    button {
        @apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
    }

    button:disabled {
        @apply opacity-50 cursor-not-allowed;
    }
</style>
