<!--
    Component: NavigationWrapper
    Wrapper for breadcrumb registration with scroll tracking
-->
<script lang="ts">
import { type Snippet } from 'svelte';
import {
    type NavigationAction,
    scrollBreadcrumbsStore,
} from '../../model';

interface Props {
    /**
     * Navigation index
     */
    index: number;
    /**
     * Navigation title
     */
    title: string;
    /**
     * Scroll offset
     * @default 96
     */
    offset?: number;
    /**
     * Content snippet
     */
    content: Snippet<[action: NavigationAction]>;
}

const { index, title, offset = 96, content }: Props = $props();

function registerBreadcrumb(node: HTMLElement) {
    scrollBreadcrumbsStore.add({ index, title, element: node }, offset);
    return {
        destroy() {
            scrollBreadcrumbsStore.remove(index);
        },
    };
}
</script>

{@render content(registerBreadcrumb)}
