<script lang="ts">
    import Button from "./button/Button.svelte";
    import { twMerge } from "tailwind-merge";

    export let maxItems: number;

    let pageParam = $page.url.searchParams.get("page");
    let currentPage = 1;
    if (pageParam) {
        let pageParamAsNumber = Number(pageParam);
        if (pageParamAsNumber) {
            currentPage = pageParamAsNumber;
        }
    }
</script>

<section
    class={twMerge("mt-8 flex justify-center gap-5", $$restProps["class"])}
>
    {#if currentPage > 1}
        <a
            on:click={() =>
                setTimeout(() => {
                    currentPage = currentPage - 1;
                }, 10)}
            href={`?page=${currentPage - 1}`}
        >
            <Button>Forrige</Button>
        </a>
    {/if}
    {#if (currentPage + 1) * 10 - 10 < maxItems}
        <a
            on:click={() =>
                setTimeout(() => {
                    currentPage = currentPage + 1;
                }, 10)}
            href={`?page=${currentPage + 1}`}
        >
            <Button>Neste</Button>
        </a>
    {/if}
</section>
