import { jsx as e, jsxs as c } from "react/jsx-runtime";
import { u as b, E as v } from "./use-device-info.DSobfzJS.js";
import { _ as o } from "./twind.D_WBdNpx.js";
import { C as h } from "./dnd.esm.ByOls-Fs.js";
import { m as D, a as y } from "./use-editor.BioV43yU.js";
import { b as k } from "./use-section-style.CgktT_qE.js";
function T({
  brick: t,
  level: d = 0
  // Default level to 0 if not provided
}) {
  const l = t.props, s = l.$children, f = k(t), u = Object.values(f), { isDesktop: m } = b(), p = D(), g = y(), x = l.direction === "flex-col" ? "vertical" : "horizontal";
  return /* @__PURE__ */ e(
    h,
    {
      droppableId: t.id,
      type: "brick",
      isDropDisabled: !m,
      direction: x,
      mode: "virtual",
      renderClone: () => null,
      children: (a, r) => /* @__PURE__ */ c(
        "div",
        {
          ...a.droppableProps,
          ref: a.innerRef,
          className: o(
            "flex-1 flex @mobile:flex-wrap relative",
            r.isDraggingOver && "!outline !outline-2 !outline-orange-300",
            (r.isDraggingOver || p) && "!overflow-y-hidden",
            r.isDraggingOver && "[&>*]:(!transform-none)",
            ...u
          ),
          children: [
            s && s.length > 0 ? s.filter((i) => {
              var n;
              return !((n = i.props.hidden) != null && n[g]);
            }).map((i, n) => /* @__PURE__ */ e(
              v,
              {
                level: d + 1,
                brick: i,
                isContainerChild: !0,
                index: n
              },
              `${i.id}`
            )) : /* @__PURE__ */ c(
              "div",
              {
                className: o(
                  "w-full h-full text-center p-4 rounded flex justify-center items-center text-base font-medium"
                ),
                children: [
                  "This is a box.",
                  /* @__PURE__ */ e("br", {}),
                  "Drag bricks here to stack them inside."
                ]
              }
            ),
            r.isDraggingOver && /* @__PURE__ */ e(
              "div",
              {
                className: o(
                  "absolute inset-0 z-auto flex items-center justify-center bg-black/30 font-bold text-white rounded"
                ),
                children: /* @__PURE__ */ e("span", { className: "inline-flex rounded-full px-4 py-2 bg-black/50", children: "Drop in box" })
              }
            )
          ]
        }
      )
    }
  );
}
export {
  T as default
};
//# sourceMappingURL=DroppableBox.BvIXhioe.js.map
