import { XmarkRemove24SecondaryIcon } from '@cloudtower/icons-react';
import { styled } from '@linaria/react';
import Icon from '../Icon/index.js';
import cs from 'classnames';
import React__default, { useState } from 'react';
import DropdownTransition from '../../coreX/DropdownTransition/index.js';

const Card = /*#__PURE__*/styled('div')({
  name: "Card",
  class: "E_c18gxmrl",
  propsAsIs: false
});
const CloseButton = props => {
  const {
    className,
    onClick
  } = props;
  return /* @__PURE__ */React__default.createElement(Icon, {
    src: XmarkRemove24SecondaryIcon,
    iconHeight: 24,
    iconWidth: 24,
    className,
    onClick: e => {
      e.stopPropagation();
      onClick == null ? void 0 : onClick(e);
    }
  });
};
const AccordionCard = props => {
  const {
    header,
    expand,
    className,
    defaultExpand = true,
    mountOnEnter,
    unmountOnExit
  } = props;
  const [active, setActive] = useState(defaultExpand);
  return /* @__PURE__ */React__default.createElement(Card, {
    className: cs(active && "active", className)
  }, /* @__PURE__ */React__default.createElement("header", {
    onClick: () => setActive(!active),
    className: "show-close"
  }, typeof header === "function" ? header(active) : header), /* @__PURE__ */React__default.createElement(DropdownTransition, {
    visible: active,
    timeout: 200,
    classNames: "topo-dropdown",
    mountOnEnter,
    unmountOnExit
  }, /* @__PURE__ */React__default.createElement("div", {
    className: "expand"
  }, expand)));
};
AccordionCard.CloseButton = CloseButton;
var AccordionCard$1 = AccordionCard;

export { AccordionCard$1 as default };
