<template>
    <div class="reader-settings">
        <button @click="onToggleReadingMode">
            {{ readingMode === 'single' ? 'Mode Infini' : 'Mode Simple' }}
        </button>
        <button @click="onToggleReadingDirection">
            {{ readingDirection === 'ltr' ? 'RTL' : 'LTR' }}
        </button>
        <div class="zoom-controls">
            <button @click="onZoomOut">-</button>
            <span>{{ Math.round(zoom * 100) }}%</span>
            <button @click="onZoomIn">+</button>
        </div>
    </div>
</template>

<script setup>
    defineProps({
        readingMode: {
            type: String,
            required: true
        },
        readingDirection: {
            type: String,
            required: true
        },
        zoom: {
            type: Number,
            required: true
        }
    });

    const emit = defineEmits(['toggleReadingMode', 'toggleReadingDirection', 'zoomIn', 'zoomOut']);

    const onToggleReadingMode = () => emit('toggleReadingMode');
    const onToggleReadingDirection = () => emit('toggleReadingDirection');
    const onZoomIn = () => emit('zoomIn');
    const onZoomOut = () => emit('zoomOut');
</script>

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

    .zoom-controls {
        @apply flex items-center gap-2;
    }

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