'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';
export function TableOfContents({ headings, className }) {
    const [activeId, setActiveId] = useState('');
    // Track which heading is currently in view
    useEffect(()=>{
        if (headings.length === 0) return;
        const observer = new IntersectionObserver((entries)=>{
            entries.forEach((entry)=>{
                if (entry.isIntersecting) {
                    setActiveId(entry.target.id);
                }
            });
        }, {
            rootMargin: '-80px 0px -80% 0px',
            threshold: 0
        });
        // Observe all headings
        headings.forEach((heading)=>{
            const element = document.getElementById(heading.id);
            if (element) {
                observer.observe(element);
            }
        });
        return ()=>observer.disconnect();
    }, [
        headings
    ]);
    if (headings.length === 0) return null;
    // Filter to only show h2 and h3
    const filteredHeadings = headings.filter((h)=>h.level >= 2 && h.level <= 3);
    if (filteredHeadings.length === 0) return null;
    return /*#__PURE__*/ _jsxs("nav", {
        className: cn('text-sm', className),
        children: [
            /*#__PURE__*/ _jsx("h4", {
                className: "font-semibold text-foreground mb-3",
                children: "On this page"
            }),
            /*#__PURE__*/ _jsx("ul", {
                className: "space-y-2",
                children: filteredHeadings.map((heading)=>/*#__PURE__*/ _jsx("li", {
                        style: {
                            paddingLeft: `${(heading.level - 2) * 12}px`
                        },
                        children: /*#__PURE__*/ _jsx("a", {
                            href: `#${heading.id}`,
                            onClick: (e)=>{
                                e.preventDefault();
                                const element = document.getElementById(heading.id);
                                if (element) {
                                    element.scrollIntoView({
                                        behavior: 'smooth'
                                    });
                                    // Update URL without scroll
                                    window.history.pushState(null, '', `#${heading.id}`);
                                    setActiveId(heading.id);
                                }
                            },
                            className: cn('block py-1 transition-colors hover:text-foreground', activeId === heading.id ? 'text-primary font-medium' : 'text-muted-foreground'),
                            children: heading.title
                        })
                    }, heading.id))
            })
        ]
    });
}
/**
 * Extract headings from rendered content
 * Call this on the client after MDX renders
 */ export function extractHeadingsFromDOM() {
    const headings = [];
    const elements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
    elements.forEach((el)=>{
        const id = el.id;
        const title = el.textContent || '';
        const level = parseInt(el.tagName[1], 10);
        if (id && title) {
            headings.push({
                id,
                title,
                level
            });
        }
    });
    return headings;
}
