import { Outlet, useLocation } from "react-router-dom";
import { DocSidebar } from "./DocSidebar";
import { DocBreadcrumbs } from "./DocBreadcrumbs";
import { DocPagination } from "./DocPagination";
import { TableOfContents } from "./components/TableOfContents";

export function DocLayout() {
  const { pathname } = useLocation();
  const isHome = pathname === "/docs";

  return (
    <div className="flex min-h-screen bg-background">
      {/* Left sidebar */}
      <DocSidebar />

      {/* Main content */}
      <div className="flex flex-1 min-w-0">
        {/* Article */}
        <main className="flex-1 min-w-0 px-8 py-10 overflow-y-auto max-h-screen">
          <div className="max-w-3xl mx-auto">
            {!isHome && <DocBreadcrumbs />}
            <div
              data-doc-content
              className="prose prose-sm sm:prose-base max-w-none
                prose-headings:font-bold prose-headings:tracking-tight
                prose-h1:text-3xl prose-h1:mb-2
                prose-h2:text-xl prose-h2:mt-8 prose-h2:mb-3
                prose-h3:text-base prose-h3:mt-6 prose-h3:mb-2
                prose-p:text-muted-foreground prose-p:leading-7
                prose-li:text-muted-foreground prose-li:leading-7
                prose-strong:text-foreground
                prose-code:text-sm prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
                prose-a:text-primary prose-a:no-underline hover:prose-a:underline
              "
            >
              <Outlet />
            </div>
            {!isHome && <DocPagination />}
          </div>
        </main>

        {/* Right TOC (hidden on home page and small screens) */}
        {!isHome && (
          <div className="hidden xl:block w-56 shrink-0 px-6 py-10 overflow-y-auto max-h-screen">
            <TableOfContents />
          </div>
        )}
      </div>
    </div>
  );
}