<script lang="ts">
    import Icon from "@iconify/svelte";

    let {
        currentPage = $bindable(),
        totalPages,
        goToPage,
    }: {
        currentPage: number;
        totalPages: number;
        goToPage: (p: number) => void;
    } = $props();
</script>

{#if totalPages > 1}
    <div class="flex items-center justify-center gap-4 mt-6">
        <button
            class="w-12 h-12 flex items-center justify-center rounded-xl bg-white/5 border border-white/10 text-white cursor-pointer transition-all duration-200 hover:enabled:bg-white/15 hover:enabled:scale-105 disabled:opacity-30 disabled:cursor-not-allowed"
            disabled={currentPage === 1}
            onclick={() => goToPage(currentPage - 1)}
        >
            <Icon icon="ri:arrow-left-s-line" width="24" />
        </button>

        <div class="flex gap-2">
            {#if totalPages <= 7}
                {#each Array(totalPages) as _, i}
                    <button
                        class="px-[18px] h-12 flex items-center justify-center rounded-xl border font-bold text-sm cursor-pointer transition-all duration-200 hover:enabled:bg-white/15 hover:enabled:scale-105 disabled:opacity-30 disabled:cursor-not-allowed
						{currentPage === i + 1
                            ? 'bg-emerald-500 border-emerald-500 text-emerald-950'
                            : 'bg-white/5 border-white/10 text-white'}"
                        onclick={() => goToPage(i + 1)}
                    >
                        {i + 1}
                    </button>
                {/each}
            {:else}
                <span class="text-white/50 text-sm font-semibold self-center">
                    Page {currentPage} of {totalPages}
                </span>
            {/if}
        </div>

        <button
            class="w-12 h-12 flex items-center justify-center rounded-xl bg-white/5 border border-white/10 text-white cursor-pointer transition-all duration-200 hover:enabled:bg-white/15 hover:enabled:scale-105 disabled:opacity-30 disabled:cursor-not-allowed"
            disabled={currentPage === totalPages}
            onclick={() => goToPage(currentPage + 1)}
        >
            <Icon icon="ri:arrow-right-s-line" width="24" />
        </button>
    </div>
{/if}
