<script lang="ts">
    let page = $state(1);
    let totalPages = 10; // You'll want to set this to your actual total pages

    function handleKeydown(event: KeyboardEvent) {
        if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
            if (page > 1) page--;
        } else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
            page++;
        } else if (event.key.toLowerCase() === 'p') {
            const input = prompt(`Enter page number (1-${totalPages})\nCurrent: ${page}/${totalPages}`);
            if (input !== null) {
                const newPage = parseInt(input);
                page = newPage;
            }
        }
    }

    function handleWheel(event: WheelEvent) {
        if (event.deltaY > 0) {
            page++;
        } else if (event.deltaY < 0 && page > 1) {
            page--;
        }
    }

    function handleClick() {
        page++;
    }
</script>
<svelte:window on:keydown|preventDefault={handleKeydown} on:wheel|preventDefault={handleWheel} on:click={handleClick}/>
<img 
    src="/pages/page_{page}.webp" 
    alt="Page {page}" 
    class="w-screen h-screen object-contain cursor-pointer" 
/>