<template>
    <div class="chapter-navigation">
        <button
            v-if="hasPreviousChapter"
            @click="goToPreviousChapter"
            class="nav-button nav-button-previous"
            :disabled="isLoading"
            title="Chapitre précédent"
        >
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
            <span class="hidden sm:inline">Chapitre précédent</span>
            <span class="sm:hidden">Précédent</span>
        </button>

        <div class="flex-1"></div>

        <button
            v-if="hasNextChapter"
            @click="goToNextChapter"
            class="nav-button nav-button-next"
            :disabled="isLoading"
            title="Chapitre suivant"
        >
            <span class="hidden sm:inline">Chapitre suivant</span>
            <span class="sm:hidden">Suivant</span>
            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
        </button>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useReaderStore } from '../../application/store/readerStore';

const store = useReaderStore();

const props = defineProps({
    position: {
        type: String,
        default: 'top', // 'top' ou 'bottom'
        validator: (value) => ['top', 'bottom'].includes(value)
    }
});

const hasPreviousChapter = computed(() => store.hasPreviousChapter);
const hasNextChapter = computed(() => store.hasNextChapter);
const isLoading = computed(() => store.isLoading);

const goToPreviousChapter = async () => {
    await store.goToPreviousChapter();
};

const goToNextChapter = async () => {
    await store.goToNextChapter();
};
</script>

<style lang="postcss" scoped>
.chapter-navigation {
    @apply flex items-center justify-between w-full px-4 py-3;
    @apply bg-gray-800/80 backdrop-blur-sm border border-gray-700/50;
    @apply rounded-lg shadow-lg;
}

.nav-button {
    @apply flex items-center px-4 py-2;
    @apply bg-blue-600 hover:bg-blue-700 text-white;
    @apply rounded-md transition-all duration-200;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
    @apply font-medium text-sm;
}

.nav-button:disabled {
    @apply hover:bg-blue-600;
}

.nav-button-previous {
    @apply mr-auto;
}

.nav-button-next {
    @apply ml-auto;
}
</style>
