import * as React from "react"
 
import {
  useSectionTracker,
  type TrackedSectionConfig,
} from "@/hooks/use-section-tracker"
 
export function DocsLayout({ children }: { children: React.ReactNode }) {
  const sections = ["introduction", "setup", "usage"].map((id) => ({
    id,
    ref: React.useRef<HTMLElement | null>(null),
  }))
 
  const { activeSection } = useSectionTracker(
    sections as TrackedSectionConfig[]
  )
 
  return (
    <div className="grid gap-4 md:grid-cols-[200px,minmax(0,1fr)]">
      <nav className="space-y-1 text-sm">
        {sections.map((section) => (
          <button
            key={section.id}
            type="button"
            className={
              activeSection === section.id
                ? "font-semibold"
                : "text-muted-foreground"
            }
          >
            {section.id}
          </button>
        ))}
      </nav>
      <div>{children}</div>
    </div>
  )
}

export interface TrackedSectionConfig {
  id: string
  ref: React.RefObject<HTMLElement | null>
}
 
export interface UseSectionTrackerOptions {
  rootMargin?: string
  threshold?: number
}
 
export interface UseSectionTrackerResult {
  activeSection: string | null
}