import { useState } from "react";
import { Outlet, useLocation } from "react-router-dom";
import { Sidebar } from "../components/Sidebar";
import { TopBar } from "../components/TopBar";

export function DocsLayout() {
  const [collapsed, setCollapsed] = useState(false);
  const { pathname } = useLocation();
  const isFullscreenDemo = pathname.startsWith("/docs/demos/") || pathname.startsWith("/docs/prototypes/");

  if (isFullscreenDemo) {
    return (
      <div className="flex h-screen w-full overflow-hidden bg-black max-md:block">
        <div className="flex min-w-0 flex-1 flex-col overflow-hidden max-md:h-screen">
          <div className="min-h-0 flex-1 overflow-auto overscroll-contain p-0">
            <Outlet />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-screen w-full overflow-hidden max-md:flex-col">
      <Sidebar collapsed={collapsed} />
      <div className="flex min-w-0 flex-1 flex-col overflow-hidden max-md:min-h-0">
        <TopBar collapsed={collapsed} onToggle={() => setCollapsed((value) => !value)} />
        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain bg-bg px-10 py-8 max-md:px-5 max-md:py-4">
          <Outlet />
        </div>
      </div>
    </div>
  );
}