"use client"

import TocObserver from "./TocObserver"
import { ScrollArea } from "@/components/ui/scroll-area"
import { ListIcon } from "lucide-react"
import Sponsor from "./Sponsor"
import { useActiveSection } from "@/hooks"
import { TocItem } from "@/lib/toc"

export default function Toc({ tocs }: { tocs: TocItem[] }) {
  const { activeId, setActiveId } = useActiveSection(tocs)

  return (
    <div className="toc flex-3 sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[238px] self-start lg:flex lg:p-8">
      <div className="mb-auto flex h-full w-full flex-col gap-2 px-2">
        <div className="flex items-center gap-2">
          <ListIcon className="h-4 w-4" />
          <h3 className="text-sm font-medium">On this page</h3>
        </div>
        <div className="max-h-[calc(70vh-2rem)] min-h-0 shrink-0">
          <ScrollArea className="h-full">
            <TocObserver data={tocs} activeId={activeId} onActiveIdChange={setActiveId} />
          </ScrollArea>
        </div>
        <Sponsor />
      </div>
    </div>
  )
}