import { jsx as e, jsxs as l } from "react/jsx-runtime";
import { useState as m, isValidElement as w, cloneElement as d } from "react";
import { IconSize as x } from "../../foundation/Icon/IconSize.es.js";
import { merge as f } from "../../utilities/merge.es.js";
import { AccordionHeaderIcon as p } from "./AccordionHeaderIcon.es.js";
const h = "fondue-accordion-header", u = ({
  isOpen: a = !1,
  decorator: r,
  disabled: n = !1,
  children: s,
  "data-test-id": t = h
}) => {
  const [o, c] = m(null), i = /* @__PURE__ */ e(p, { isOpen: a });
  return /* @__PURE__ */ e("span", { "data-test-id": t, className: "tw-block tw-px-8 tw-py-6", children: /* @__PURE__ */ l(
    "span",
    {
      "data-test-id": `${t}-container`,
      role: "navigation",
      "aria-label": `${(o == null ? void 0 : o.innerText) || ""}`,
      className: f([
        "tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row",
        !n && a && "tw-text-text",
        !n && !a && "tw-text-text-weak hover:tw-text-text",
        n && "tw-text-text-disabled"
      ]),
      children: [
        w(r) && /* @__PURE__ */ e("span", { "data-test-id": `${t}-decorator`, className: "tw-shrink-0 tw-leading-4", children: d(r, {
          size: x.Size16
        }) }),
        /* @__PURE__ */ e(
          "span",
          {
            ref: c,
            "data-test-id": `${t}-text`,
            className: "tw-text-left tw-text-m tw-font-normal",
            children: s
          }
        ),
        i && /* @__PURE__ */ e("span", { "data-test-id": `${t}-icon-container`, className: "tw-ml-auto tw-shrink-0", children: i })
      ]
    }
  ) });
};
u.displayName = "FondueAccordionHeader";
export {
  u as AccordionHeader
};
//# sourceMappingURL=AccordionHeader.es.js.map
