import { jsx as a, jsxs as f } from "react/jsx-runtime";
import { bo as g } from "./use-page-data.BYLN5MSa.js";
import { B as M } from "./BrickWrapper.DUMJ-X1W.js";
import { E as S } from "./EditableBrick.mVJOjFEX.js";
import { a as r } from "./twind.Cg2g8xBZ.js";
import { B as h } from "./BrickRoot.CQgjTuOI.js";
import { b as W } from "./use-section-style.CqWLdjop.js";
import { useState as E } from "react";
function H({
  brick: t,
  editable: o,
  isDynamicPreview: y,
  iterationIndex: x,
  level: O = 0
}) {
  const i = W(t), n = Array.isArray(t.props.tabs) ? t.props.tabs : [], l = Array.isArray(t.props.$children) ? t.props.$children : [], v = typeof t.props.defaultTab == "number" ? t.props.defaultTab : 0, c = t.props.tabPosition || "top", d = t.props.tabStyle || "underline", u = t.props.fullWidth || !1, T = t.props.padding || "1.5rem", C = t.props.gap || "0.5rem", [N, B] = E(Math.max(0, Math.min(v, n.length - 1))), p = Math.max(0, Math.min(N, Math.min(n.length - 1, l.length - 1))), m = Array.isArray(l[p]) ? l[p] : [], w = (e) => {
    const s = "px-4 py-2 font-medium text-sm transition-all duration-200 cursor-pointer select-none";
    switch (d) {
      case "pills":
        return r(
          s,
          "rounded-full",
          e ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
        );
      case "bordered":
        return r(
          s,
          "border border-gray-200 first:rounded-l-md last:rounded-r-md -ml-px first:ml-0",
          e ? "bg-blue-50 text-blue-700 border-blue-300 z-10 relative" : "bg-white text-gray-700 hover:bg-gray-50"
        );
      default:
        return r(
          s,
          "border-b-2",
          e ? "border-blue-600 text-blue-700" : "border-transparent text-gray-600 hover:text-gray-800 hover:border-gray-300"
        );
    }
  }, A = () => {
    const e = "flex";
    if (u)
      return r(e, "w-full");
    switch (d) {
      case "pills":
        return r(e, "space-x-2");
      case "bordered":
        return r(e);
      default:
        return r(e, "border-b border-gray-200");
    }
  }, b = () => /* @__PURE__ */ a("div", { className: A(), style: { gap: d === "underline" ? C : void 0 }, children: n.map((e, s) => /* @__PURE__ */ a(
    "button",
    {
      type: "button",
      className: r(w(s === p), u && "flex-1 text-center"),
      onClick: () => B(s),
      disabled: o,
      children: e.label
    },
    e.id || s
  )) }), j = () => /* @__PURE__ */ f("div", { className: r("flex-1", t.props.rounding || "rounded-md"), style: { padding: T }, children: [
    m.map(
      (e, s) => o ? /* @__PURE__ */ a(
        S,
        {
          brick: e,
          index: s,
          iterationIndex: x,
          isDynamicPreview: y
        },
        e.id
      ) : /* @__PURE__ */ a(M, { brick: e }, e.id)
    ),
    m.length === 0 && /* @__PURE__ */ a("div", { className: "text-gray-500 text-center py-8", children: o ? "Drop bricks here to add content to this tab" : "No content available" })
  ] });
  return n.length === 0 ? /* @__PURE__ */ a(
    h,
    {
      editable: o,
      manifest: g,
      brick: t,
      className: r("flex flex-col items-center justify-center text-center p-8", Object.values(i)),
      children: /* @__PURE__ */ a("div", { className: "text-gray-500", children: o ? "Configure tabs in the panel to get started" : "No tabs configured" })
    }
  ) : /* @__PURE__ */ f(
    h,
    {
      editable: o,
      manifest: g,
      className: r("flex flex-col w-full", Object.values(i)),
      brick: t,
      children: [
        c === "top" && b(),
        j(),
        c === "bottom" && b()
      ]
    }
  );
}
export {
  H as default
};
