<script>
    import { sectionStore } from "$lib/stores/currentSection";
    import { onMount } from "svelte";
    import { fly, slide } from "svelte/transition";

    export let page,
        slides,
        includeFirst = true;

    console.log(page, slides, includeFirst);

    let newSlides = includeFirst ? slides : slides.slice(1);

    let pageSection = sectionStore[page];

    let currentSection = $pageSection;

    onMount(() => {
        pageSection.subscribe((cs) => {
            console.log(cs);
            currentSection = cs;
        });
    });

    // let currentSection = 0
</script>

<h1 class="h1">{currentSection}</h1>
{#if includeFirst ? currentSection >= 0 : currentSection > 0}
    <div
        in:fly={{ x: 50, duration: 300 }}
        out:fly={{ x: 50, duration: 300 }}
        class="tracker"
    >
        {#each slides as _, i}
            <div
                class="tracker-dot {(includeFirst ? i : i + 1) ===
                currentSection
                    ? 'active'
                    : ''}"
            ></div>
        {/each}
    </div>
{/if}

<style>
    /* Tracker Styles */
    .tracker {
        position: fixed;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tracker-dot {
        width: 10px;
        height: 10px;
        @apply bg-surface-600;
        border-radius: 50%;
        transition: background-color 0.3s ease;
    }

    .tracker-dot.active {
        @apply bg-primary-600;
    }

    @media (prefers-color-scheme: light) {
        .tracker-dot {
            @apply bg-surface-300;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }

        .tracker-dot.active {
            @apply bg-primary-600;
        }
    }
</style>
