<template>
    <div class="reader-controls">
        <button @click="onPrevious" :disabled="isFirstPage">
            <ChevronLeftIcon class="h-6 w-6" />
        </button>
        <div class="page-info"> {{ currentPage + 1 }} / {{ totalPages }} </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';

    defineProps({
        currentPage: {
            type: Number,
            required: true
        },
        totalPages: {
            type: Number,
            required: true
        },
        isFirstPage: {
            type: Boolean,
            required: true
        },
        isLastPage: {
            type: Boolean,
            required: true
        }
    });

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

    const onPrevious = () => emit('previous');
    const onNext = () => emit('next');
</script>

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

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

    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>
