'use client';
import { useEffect, useState } from 'react';
import { List, ChevronDown } from 'lucide-react';
export default function TableOfContents({ items }) {
const [activeId, setActiveId] = useState(null);
const [mobileOpen, setMobileOpen] = useState(false);
// следим за тем, какой заголовок сейчас в viewport
useEffect(() => {
if (!items?.length) return;
const headings = items
.map(i => document.getElementById(i.id))
.filter(Boolean);
if (!headings.length) return;
const onScroll = () => {
// ближайший к верху, но не выше offset
const offset = 120;
let current = headings[0]?.id || null;
for (const h of headings) {
const top = h.getBoundingClientRect().top;
if (top <= offset) current = h.id;
else break;
}
setActiveId(current);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, [items]);
function scrollTo(e, id) {
e.preventDefault();
const el = document.getElementById(id);
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
setMobileOpen(false);
}
}
if (!items || items.length < 2) return null;
return (
<>
{/* Desktop: sticky слева, видна на lg+ */}
{/* Mobile: раскрывающийся блок над текстом */}
);
}