import { jsxs as l, jsx as o } from "react/jsx-runtime";
import w from "../../foundation/Icon/Generated/IconArrowLeft.es.js";
import { useMobileDetection as g } from "../../hooks/useMobileDetection.es.js";
import { merge as a } from "../../utilities/merge.es.js";
import { Flex as u } from "../Flex/Flex.es.js";
import { dialogPaddingMap as b } from "../../types/dialog.es.js";
import { Box as e } from "../Box/Box.es.js";
import { Button as s } from "../Button/Button.es.js";
import { ButtonEmphasis as x, ButtonSize as h } from "../Button/ButtonTypes.es.js";
const $ = ({
  actionButtons: r,
  children: m,
  backButton: i,
  padding: p = "comfortable",
  separator: f = !0,
  "data-test-id": t = "fondue-dialog-footer"
}) => {
  const n = g();
  return /* @__PURE__ */ l(
    e,
    {
      "data-test-id": t,
      className: a([
        "tw-border-t tw-border-t-line",
        b[p],
        !f && "tw-pt-0 tw-border-none"
      ]),
      children: [
        n && /* @__PURE__ */ o(
          e,
          {
            className: a(["tw-w-full", i || r.length > 0 ? "tw-pb-2" : ""]),
            "data-test-id": `${t}-content`,
            children: m
          }
        ),
        /* @__PURE__ */ l(u, { justify: "between", alignItems: "center", spacingX: 12, children: [
          i && /* @__PURE__ */ o(
            s,
            {
              "data-test-id": `${t}-back-button`,
              ...i,
              emphasis: x.Default,
              icon: /* @__PURE__ */ o(w, {})
            }
          ),
          !n && /* @__PURE__ */ o(e, { className: "tw-grow", "data-test-id": `${t}-content`, children: m }),
          r.length > 0 ? /* @__PURE__ */ o(e, { className: "tw-flex tw-gap-x-3", "data-test-id": `${t}-action-buttons`, children: r.map((d, c) => /* @__PURE__ */ o(s, { ...d, size: h.Medium }, `${t}-button-${c}`)) }) : null
        ] })
      ]
    }
  );
};
$.displayName = "FondueDialogFooter";
export {
  $ as DialogFooter
};
//# sourceMappingURL=DialogFooter.es.js.map
