OnThisPage

import { OnThisPage } from 'boltdocs/primitives'

// docs/components/CustomTOC.tsx
import React, { useRef } from 'react'
import { OnThisPage, AnchorProvider, ScrollProvider } from 'boltdocs/primitives'
import { useRoutes } from 'boltdocs/client'

export default function CustomTOC() {
  const { currentRoute } = useRoutes()
  const scrollContainerRef = useRef<HTMLDivElement>(null)

  const headings = currentRoute?.headings || []
  if (headings.length === 0) return null

  // Convierte la base de datos de encabezados a una estructura estándar de TOC
  const tocItems = headings.map((h) => ({
    title: h.text,
    url: `#${h.id}`,
    depth: h.level,
  }))

  return (
    <OnThisPage className="border-l border-subtle pl-6 py-6 bg-transparent">
      {/* 1. Encabezado de Título Estático */}
      <OnThisPage.Header className="text-xs font-bold uppercase tracking-wider text-zinc-400 mb-4">
        Tabla de Contenidos
      </OnThisPage.Header>

      {/* 2. Proveedores de Envoltorio de Contexto de Rastreador de Scroll */}
      <AnchorProvider toc={tocItems} single={false}>
        <ScrollProvider containerRef={scrollContainerRef}>
          
          {/* 3. Viewport Desplazable con Máscara */}
          <OnThisPage.Content ref={scrollContainerRef} className="max-h-[80vh]">
            <OnThisPage.List className="relative border-l border-zinc-200 dark:border-zinc-800">
              
              {/* 4. Indicador de Acento de Sección Activa */}
              <OnThisPage.Indicator className="bg-primary-500" />
              
              {/* 5. Mapeo Jerárquico de Enlaces */}
              {headings.map((h) => (
                <OnThisPage.Item key={h.id} level={h.level}>
                  <OnThisPage.Link href={`#${h.id}`}>
                    {h.text}
                  </OnThisPage.Link>
                </OnThisPage.Item>
              ))}

            </OnThisPage.List>
          </OnThisPage.Content>

        </ScrollProvider>
      </AnchorProvider>
    </OnThisPage>
  )
}