import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { useState as w } from "react";
import { ChevronLeftW700 as l } from "@material-symbols-svg/react-rounded/icons/chevron-left";
import { cn as p } from "../utils/cn.js";
import { Hr as f } from "./Hr.js";
import { Card as h } from "./Card.js";
import { Badge as u } from "./Badge.js";
const E = ({
  title: a,
  badge: t,
  children: o,
  isBadgeLoading: m,
  expandedHeightPx: n,
  expandedByDefault: i = !1,
  className: c
}) => {
  const [r, d] = w(i);
  return /* @__PURE__ */ s(h, { className: p("py-sw-xl", c), children: [
    /* @__PURE__ */ s(
      "header",
      {
        onClick: () => d((x) => !x),
        className: "items-center flex w-full justify-between cursor-pointer",
        children: [
          /* @__PURE__ */ e("span", { className: "gap-sw-xs text-sw-label-md flex text-center text-sw-gray-200", children: a }),
          m ? /* @__PURE__ */ e("div", { className: "ml-auto h-[20px] w-[100px] animate-pulse rounded-full bg-sw-gray-800" }) : t && /* @__PURE__ */ e(u, { children: t }),
          /* @__PURE__ */ e("button", { type: "button", className: "ml-sw-lg cursor-pointer", children: r ? /* @__PURE__ */ e(l, { className: "h-sw-2xl w-sw-2xl text-sw-gray-200 rotate-90" }) : /* @__PURE__ */ e(l, { className: "h-sw-2xl w-sw-2xl text-sw-gray-200 -rotate-90" }) })
        ]
      }
    ),
    /* @__PURE__ */ s(
      "div",
      {
        style: { height: r ? n : 0 },
        className: "gap-sw-md flex flex-col overflow-hidden transition-all delay-0 duration-300 ease-in-out",
        children: [
          /* @__PURE__ */ e(f, { className: "mt-sw-xl mb-sw-md" }),
          o
        ]
      }
    )
  ] });
};
export {
  E as Accordion
};
//# sourceMappingURL=Accordion.js.map
