import { jsxs, jsx } from "react/jsx-runtime";
import { IconChevronRight } from "../../icons/index.mjs";
/* empty css                                                                                                                                                                                       */
/* empty css                                                                                                                                                                                        */
/* empty css                                                                                                                                                                                                */
/* empty css                                                                                                                                                                                           */
/* empty css                                                                                                                                                                                           */
import { useUncontrolled } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.mjs";
import { Card } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Card/Card.mjs";
import { Group } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.mjs";
import { Collapse } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Collapse/Collapse.mjs";
import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
const CollapsibleCard = ({
  children,
  title,
  opened,
  defaultOpened = false,
  headerProps,
  contentProps,
  onToggle,
  onTransitionEnd
}) => {
  const [finalOpened, setOpened] = useUncontrolled({
    value: opened,
    defaultValue: defaultOpened,
    finalValue: false,
    onChange: onToggle
  });
  const handleToggle = () => {
    setOpened(!finalOpened);
  };
  return /* @__PURE__ */ jsxs(Card, { children: [
    /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsxs(
      Group,
      {
        onClick: handleToggle,
        align: "center",
        sx: {
          cursor: "pointer",
          userSelect: "none",
          borderBottom: finalOpened ? "1px solid var(--mantine-color-carbon-3)" : void 0
        },
        p: 16,
        bg: "carbon.2",
        ...headerProps,
        children: [
          /* @__PURE__ */ jsx(
            IconChevronRight,
            {
              size: 18,
              sx: {
                transform: finalOpened ? "rotate(90deg)" : "rotate(0deg)",
                transition: "transform 200ms ease"
              }
            }
          ),
          title
        ]
      }
    ) }),
    /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Collapse, { in: finalOpened, onTransitionEnd: onTransitionEnd ? () => onTransitionEnd(finalOpened) : void 0, children: /* @__PURE__ */ jsx(Box, { p: 16, ...contentProps, children }) }) })
  ] });
};
export {
  CollapsibleCard
};
