<script lang="ts">
    interface TOCItem {
        label: string;
        href: string;
    }

    const {
        ariaLabel = 'Page contents',
        items,
        title = 'On this page',
    }: {
        ariaLabel?: string;
        items: TOCItem[];
        title?: string;
    } = $props();
</script>

<nav class="section toc" aria-label={ariaLabel}>
    <div class="container">
        <h2 class="title">{title}</h2>
        <ul class="list">
            {#each items as item}
                <li><a href={item.href}>{item.label}</a></li>
            {/each}
        </ul>
    </div>
</nav>

<style>
    .toc {
        padding: var(--space-xl) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .title {
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--space-md);
    }

    .list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm) var(--space-xl);

        & a {
            color: var(--color-text-secondary);
            font-size: var(--font-size-medium);

            &:hover {
                color: var(--color-primary);
            }
        }
    }
</style>
