<!--
    Component: BreadcrumbHeader
    Fixed header for breadcrumbs navigation for sections in the page
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
    fly,
    slide,
} from 'svelte/transition';
import { scrollBreadcrumbsStore } from '../../model';
</script>

{#if scrollBreadcrumbsStore.items.length > 0}
    <div
        transition:slide={{ duration: 200 }}
        class="
            fixed top-0 left-0 right-0 z-100
            backdrop-blur-lg bg-white/20
            border-b border-gray-300/50
            shadow-[0_1px_3px_rgba(0,0,0,0.04)]
            h-12
        "
    >
        <div class="max-w-8xl mx-auto px-6 h-full flex items-center gap-4">
            <h1 class={cn('font-[Barlow] font-extralight')}>
                GLYPHDIFF
            </h1>

            <div class="h-4 w-px bg-gray-300/60"></div>

            <nav class="flex items-center gap-3 overflow-x-auto scrollbar-hide flex-1">
                {#each scrollBreadcrumbsStore.items as item, idx (item.index)}
                    <div
                        in:fly={{ duration: 300, y: -10, x: 100, opacity: 0 }}
                        out:fly={{ duration: 300, y: 10, x: 100, opacity: 0 }}
                        class="flex items-center gap-3 whitespace-nowrap shrink-0"
                    >
                        <span class="font-mono text-[9px] text-gray-400 tracking-wider">
                            {String(item.index).padStart(2, '0')}
                        </span>

                        {@render item.title({
    className: 'text-[10px] md:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
})}

                        {#if idx < scrollBreadcrumbsStore.items.length - 1}
                            <div class="flex items-center gap-0.5 opacity-40">
                                <div class="w-1 h-px bg-gray-400"></div>
                                <div class="w-1 h-px bg-gray-400"></div>
                                <div class="w-1 h-px bg-gray-400"></div>
                            </div>
                        {/if}
                    </div>
                {/each}
            </nav>

            <div class="flex items-center gap-2 opacity-50 ml-auto">
                <div class="w-px h-2.5 bg-gray-300/60"></div>
                <span class="font-mono text-[8px] text-gray-400 tracking-wider">
                    [{scrollBreadcrumbsStore.items.length}]
                </span>
            </div>
        </div>
    </div>
{/if}

<style>
/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
</style>
