import { jsxs as f, jsx as s } from "react/jsx-runtime";
import { _ as t } from "./twind.D7be0E5m.js";
import { forwardRef as I, useState as p } from "react";
import { b as j } from "./index.DEeiGRYb.js";
import { T as u } from "./TextContent.DIF92zqL.js";
import { b as A } from "./use-section-style.D7ZN4IXn.js";
import { u as C } from "./use-color-preset.B03-6uH7.js";
const D = I(({ brick: n, editable: o }, h) => {
  const x = A(n), { props: l } = n, i = Array.isArray(l.items) ? l.items : [], { gradientDirection: w, rounding: O, ...b } = x, c = C(n), [g, v] = p(
    i.findIndex((r) => !!r.defaultOpen) || null
  ), [N, y] = p(() => i.map((r) => !!r.defaultOpen));
  return /* @__PURE__ */ f(
    "div",
    {
      ref: h,
      className: t(
        "flex flex-grow shrink-0 min-h-fit min-w-fit flex-col overflow-hidden relative",
        Object.values(b)
      ),
      children: [
        o && i.length === 0 && /* @__PURE__ */ s("div", { className: "absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center text-center p-8", children: /* @__PURE__ */ s("div", { className: "text-base", children: "Add content to this accordion in the panel" }) }),
        i.map((r, e) => {
          const a = l.restrictOneOpen ? g === e : N[e] || r.defaultOpen;
          return /* @__PURE__ */ f(
            "div",
            {
              className: t("flex flex-col border", O, c.border, "overflow-hidden"),
              children: [
                /* @__PURE__ */ f(
                  "button",
                  {
                    type: "button",
                    "aria-expanded": a,
                    onClick: () => {
                      l.restrictOneOpen ? v((m) => m === e ? null : e) : y((m) => {
                        const d = [...m];
                        return d[e] = !d[e], d;
                      });
                    },
                    className: t(
                      "flex flex-grow shrink-0 items-center p-3 gap-1 justify-between w-full",
                      "font-semibold cursor-pointer select-none text-left text-[110%] ",
                      c.title,
                      w,
                      a && "rounded-b-none border-b",
                      c.border
                    ),
                    children: [
                      /* @__PURE__ */ s("div", { className: t("flex flex-grow shrink-0 flex-row items-center gap-1"), children: /* @__PURE__ */ s(
                        u,
                        {
                          propPath: `items.${e}.title`,
                          className: t("w-full", o && "cursor-text"),
                          brickId: n.id,
                          content: r.title,
                          editable: o,
                          inline: !0
                        }
                      ) }),
                      /* @__PURE__ */ s(j, { className: t("transition-transform", a && "rotate-90") })
                    ]
                  }
                ),
                /* @__PURE__ */ s("div", { className: t("transition-all duration-900 ease-in-out p-3 flex-1", !a && "hidden"), children: /* @__PURE__ */ s(
                  u,
                  {
                    propPath: `items.${e}.content`,
                    className: t("w-full", o && "cursor-text"),
                    brickId: n.id,
                    content: r.content,
                    editable: o
                  }
                ) })
              ]
            },
            e
          );
        })
      ]
    }
  );
});
export {
  D as default
};
//# sourceMappingURL=accordion.DQInpAio.js.map
