"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Menu, X } from "lucide-react";
import { Button } from "../ui/button.js";
import { cn } from "../../lib/utils/index.js";
import { useTranslations } from "next-intl";
function DocsLayout({ children }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const t = useTranslations("docs");
  const childrenArray = Array.isArray(children) ? children : [children];
  const sidebar = childrenArray[0];
  const mainContent = childrenArray[1] || childrenArray[0];
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-background", children: [
    /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-40 lg:hidden border-b bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4", children: [
      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", children: t("title") }),
      /* @__PURE__ */ jsx(
        Button,
        {
          variant: "ghost",
          size: "icon",
          onClick: () => setSidebarOpen(!sidebarOpen),
          "aria-label": sidebarOpen ? t("sidebar.close") : t("sidebar.open"),
          "aria-expanded": sidebarOpen,
          "data-cy": "docs-mobile-menu-toggle",
          children: sidebarOpen ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
        }
      )
    ] }) }),
    /* @__PURE__ */ jsxs("div", { className: "flex", children: [
      /* @__PURE__ */ jsx(
        "aside",
        {
          className: cn(
            "fixed inset-y-0 left-0 z-30 w-64 border-r bg-background transition-transform lg:sticky lg:top-0 lg:block lg:h-screen lg:translate-x-0",
            sidebarOpen ? "translate-x-0" : "-translate-x-full"
          ),
          "aria-label": t("sidebar.label"),
          "data-cy": "docs-sidebar",
          children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children: sidebar })
        }
      ),
      sidebarOpen && /* @__PURE__ */ jsx(
        "div",
        {
          className: "fixed inset-0 z-20 bg-black/50 lg:hidden",
          onClick: () => setSidebarOpen(false),
          "aria-hidden": "true",
          "data-cy": "docs-sidebar-backdrop"
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "flex-1 lg:ml-0", children: mainContent })
    ] })
  ] });
}
export {
  DocsLayout
};
