---
interface Heading {
    depth: number;
    slug: string;
    text: string;
}

interface Props {
    headings: (Heading & { label?: boolean })[];
}

const {headings} = Astro.props;

const items = headings.filter(h => h.depth >= 2 && h.depth <= 4);
const minDepth = items.length > 0 ? Math.min(...items.map(h => h.depth)) : 2;
---

{items.length > 0 && (
<nav id="page-outline"
     aria-label="Table of Contents"
     class="w-full"
     _="install Scrollspy">
    <div class="w-full border-l border-neutral-200 dark:border-neutral-800">
        {items.map((heading) => {
            const depth = heading.depth - minDepth;
            const indentClass = depth === 0 ? 'pl-4' : depth === 1 ? 'pl-8' : 'pl-12';
            const isLabel = heading.label;

            return isLabel ? (
                    <span class:list={[
                        'block py-2 pr-2 -ml-px border-l-2 border-transparent',
                        indentClass,
                        'font-sans text-[0.625rem] tracking-widest uppercase text-neutral-600 dark:text-neutral-400',
                    ]}>
                        {heading.text}
                    </span>
            ) : (
                    <a href={`#${heading.slug}`}
                       class:list={[
                           'block py-2 pr-2 text-sm truncate -ml-px border-l-2',
                           indentClass,
                           'border-transparent text-neutral-600 interact:text-neutral-900 interact:border-neutral-300',
                           'dark:text-neutral-400 dark:interact:text-neutral-200 dark:interact:border-neutral-700',
                           'aria-[current]:border-neutral-900 aria-[current]:text-neutral-900 aria-[current]:font-semibold',
                           'dark:aria-[current]:border-neutral-100 dark:aria-[current]:text-neutral-100',
                       ]}>
                        {heading.text}
                    </a>
            );
        })}
    </div>
</nav>
)}
