---
import DocsLayout from "@layouts/DocsLayout.astro";
import TOC from "@components/navigation/sidebars/TOC.astro";
import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserver.astro";
import type { ConfigHeading } from "@src/components/navigation/sidebars/types";

export interface Props {
  title: string;
  headings: ConfigHeading[];
  description: string;
}

const { title, description, headings } = Astro.props;
---
<DocsLayout title={title} description={description} headings={headings}>
  <div class="docs">
    <div class="docs-content">
      <hr/>
      <h1>{title}</h1>
      <slot/>
    </div>
  </div>
  <TOC slot="alongside-content" mobile={false} title={title} headings={headings} data-pagefind-ignore/>
</DocsLayout>

<TOCIntersectionObserver/>