'use strict';

var clsx = require('clsx');
var React = require('react');
var Body = require('../body/Body.js');
var Chevron = require('../chevron/Chevron.js');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
require('../common/propsValues/size.js');
var typography = require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
var position = require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var Option = require('../common/Option/Option.js');

const Card = /*#__PURE__*/React.forwardRef(function Card({
  'aria-label': ariaLabel,
  as: Element = 'div',
  isExpanded,
  title,
  details,
  children,
  onClick,
  icon,
  id,
  className,
  'data-testid': dataTestId
}, reference) {
  const labelId = React.useId();
  const contentId = React.useId();
  const isExpandable = Boolean(children);
  return /*#__PURE__*/jsxRuntime.jsxs(Element, {
    ref: reference,
    className: clsx.clsx('np-card', className, {
      'np-card--expanded': isExpandable && isExpanded,
      'np-card--inactive': !children,
      'np-card--has-icon': !!icon
    }),
    id: id,
    "data-testid": dataTestId,
    children: [/*#__PURE__*/jsxRuntime.jsx(Option, {
      "aria-expanded": isExpandable ? isExpanded : undefined,
      "aria-controls": isExpanded ? contentId : undefined,
      id: labelId,
      "aria-label": ariaLabel,
      as: isExpandable ? 'button' : 'div',
      className: "np-card__button",
      media: icon,
      title: title,
      content: details,
      showMediaAtAllSizes: true,
      button: isExpandable ? /*#__PURE__*/jsxRuntime.jsx(Chevron, {
        orientation: isExpanded ? position.Position.TOP : position.Position.BOTTOM
      }) : null,
      onClick: isExpandable ? () => onClick?.(!isExpanded) : undefined
    }), isExpandable && /*#__PURE__*/jsxRuntime.jsx("div", {
      className: clsx.clsx('np-card__divider', {
        'np-card__divider--expanded': isExpanded
      })
    }), isExpandable && isExpanded && /*#__PURE__*/jsxRuntime.jsx(Body, {
      as: "div",
      type: typography.Typography.BODY_LARGE,
      className: clsx.clsx('np-card__content', isExpanded ? 'd-block' : 'hide'),
      id: contentId,
      "aria-labelledby": labelId,
      children: children
    })]
  });
});

module.exports = Card;
//# sourceMappingURL=Card.js.map
