<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import BreadcrumbHeader from './BreadcrumbHeader.svelte';

const { Story } = defineMeta({
    title: 'Entities/BreadcrumbHeader',
    component: BreadcrumbHeader,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Fixed header that slides in when the user scrolls past tracked page sections. Reads `scrollBreadcrumbsStore.scrolledPastItems` — renders nothing when the list is empty. Requires the `responsive` context provided by `Providers`.',
            },
            story: { inline: false },
        },
        layout: 'fullscreen',
    },
    argTypes: {},
});
</script>

<script>
import Providers from '$shared/lib/storybook/Providers.svelte';
import BreadcrumbHeaderSeeded from './BreadcrumbHeaderSeeded.svelte';
</script>

<Story
    name="With Breadcrumbs"
    parameters={{
        docs: {
            description: {
                story:
                    'Three sections are registered with the breadcrumb store. The story scrolls the iframe so the IntersectionObserver marks them as scrolled-past, revealing the fixed header.',
            },
        },
    }}
>
    {#snippet template()}
        <Providers>
            <BreadcrumbHeaderSeeded />
        </Providers>
    {/snippet}
</Story>

<Story
    name="Empty"
    parameters={{
        docs: {
            description: {
                story:
                    'No sections registered — BreadcrumbHeader renders nothing. This is the initial state before the user scrolls past any tracked section.',
            },
        },
    }}
>
    {#snippet template()}
        <Providers>
            <div style="padding: 2rem; color: #888; font-size: 0.875rem;">
                BreadcrumbHeader renders nothing when scrolledPastItems is empty.
            </div>
            <BreadcrumbHeader />
        </Providers>
    {/snippet}
</Story>
