import type { Metadata } from "next";
import { DocsSidebar, DocsMobileNav } from "@/components/docs/sidebar";
import { DocsToc } from "@/components/docs/toc";

export const metadata: Metadata = {
  title: { default: "Documentation", template: "%s · Fetcha Docs" },
  description: "Developer documentation for the Fetcha web access API: fetch, sessions, network selection, geolocation, errors, retries, rate limits and SDKs.",
};

export default function DocsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="container-page">
      <div className="lg:grid lg:grid-cols-[13.5rem_minmax(0,1fr)] lg:gap-10 xl:grid-cols-[13.5rem_minmax(0,1fr)_12rem] xl:gap-12">
        <DocsSidebar />
        <div className="min-w-0">
          <DocsMobileNav />
          <div className="mx-auto max-w-3xl py-8 lg:py-10">{children}</div>
        </div>
        <aside className="sticky top-14 hidden max-h-[calc(100dvh-3.5rem)] overflow-y-auto py-10 scrollbar-thin xl:block">
          <DocsToc />
        </aside>
      </div>
    </div>
  );
}