import {
  JsonViewSection,
  MetadataSection
} from "./chunk-H6MYB7GB.js";

// src/components/layout/pages/two-column-page/two-column-page.tsx
import { clx } from "@medusajs/ui";
import { Children } from "react";
import { Outlet } from "react-router-dom";
import { jsx, jsxs } from "react/jsx-runtime";
var Root = ({
  children,
  /**
   * Widgets to be rendered in the main content area and sidebar.
   */
  /**
   * Data to be passed to widgets, JSON view, and Metadata view.
   */
  data,
  /**
   * Whether to show JSON view of the data. Defaults to false.
   */
  showJSON = false,
  /**
   * Whether to show metadata view of the data. Defaults to false.
   */
  showMetadata = false,
  /**
   * Whether to render an outlet for children routes. Defaults to true.
   */
  hasOutlet = true
}) => {
  if (showJSON && !data) {
    if (process.env.NODE_ENV === "development") {
      console.warn(
        "`showJSON` is true but no data is provided. To display JSON, provide data prop."
      );
    }
    showJSON = false;
  }
  if (showMetadata && !data) {
    if (process.env.NODE_ENV === "development") {
      console.warn(
        "`showMetadata` is true but no data is provided. To display metadata, provide data prop."
      );
    }
    showMetadata = false;
  }
  const childrenArray = Children.toArray(children);
  if (childrenArray.length !== 2) {
    throw new Error("TwoColumnPage expects exactly two children");
  }
  const [main, sidebar] = childrenArray;
  const showExtraData = showJSON || showMetadata;
  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-3", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-x-4 gap-y-3 xl:grid xl:grid-cols-[minmax(0,_1fr)_440px]", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-col gap-y-3", children: [
        main,
        showExtraData && /* @__PURE__ */ jsxs(
          "div",
          {
            className: "hidden flex-col gap-y-3 xl:flex",
            "data-testid": "product-extra-data-desktop",
            children: [
              showMetadata && /* @__PURE__ */ jsx(MetadataSection, { data }),
              showJSON && /* @__PURE__ */ jsx(JsonViewSection, { data })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-3 xl:mt-0", children: [
        sidebar,
        showExtraData && /* @__PURE__ */ jsxs(
          "div",
          {
            className: "flex flex-col gap-y-3 xl:hidden",
            "data-testid": "product-extra-data-mobile",
            children: [
              showMetadata && /* @__PURE__ */ jsx(MetadataSection, { data }),
              showJSON && /* @__PURE__ */ jsx(JsonViewSection, { data })
            ]
          }
        )
      ] })
    ] }),
    hasOutlet && /* @__PURE__ */ jsx(Outlet, {})
  ] });
};
var Main = ({
  children,
  className,
  ...props
}) => {
  return /* @__PURE__ */ jsx("div", { className: clx("flex w-full flex-col gap-y-3", className), ...props, children });
};
var Sidebar = ({
  children,
  className,
  ...props
}) => {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: clx(
        "flex w-full max-w-[100%] flex-col gap-y-3 xl:mt-0 xl:max-w-[440px]",
        className
      ),
      ...props,
      children
    }
  );
};
var TwoColumnPage = Object.assign(Root, { Main, Sidebar });

export {
  TwoColumnPage
};
