'use strict';

var Icons = require('@transferwise/icons');
var componentsTheming = require('@wise/components-theming');
var clsx = require('clsx');
var avatarTypes = require('../avatar/avatarTypes.js');
var Avatar = require('../avatar/Avatar.js');
var Body = require('../body/Body.js');
var Button = require('../button/src/Button.js');
require('../common/theme.js');
require('../common/direction.js');
var control = require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.js');
var size = 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');
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('react');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var Title = require('../title/Title.js');

function CriticalCommsBanner({
  title,
  subtitle,
  action,
  className
}) {
  const {
    isModern
  } = componentsTheming.useTheme();
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    className: clsx.clsx('critical-comms', className),
    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "critical-comms-body",
      children: [/*#__PURE__*/jsxRuntime.jsx(Avatar, {
        size: size.Size.MEDIUM,
        type: avatarTypes.AvatarType.ICON,
        className: clsx.clsx(isModern ? 'm-r-2' : 'm-r-1'),
        backgroundColor: isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)',
        children: isModern ? /*#__PURE__*/jsxRuntime.jsx(Icons.AlertCircleFill, {}) : /*#__PURE__*/jsxRuntime.jsx(Icons.Alert, {
          size: 24
        })
      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "critical-comms-content d-flex align-items-center flex-grow-1",
        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
          className: clsx.clsx('flex-grow-1', {
            'p-x-2': !isModern
          }),
          children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
            type: isModern ? typography.Typography.TITLE_BODY : typography.Typography.TITLE_GROUP,
            className: "critical-comms--title",
            children: title
          }), /*#__PURE__*/jsxRuntime.jsx(Body, {
            className: "critical-comms--subtitle",
            children: subtitle
          })]
        }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "critical-comms--cta",
          children: /*#__PURE__*/jsxRuntime.jsx(Button, {
            block: isModern,
            size: size.Size.SMALL,
            type: control.ControlType.NEGATIVE,
            priority: isModern ? control.Priority.SECONDARY : control.Priority.PRIMARY,
            className: "cta-btn",
            onClick: () => {
              if (action) {
                window.location.href = action.href;
              }
            },
            children: action.label
          })
        }) : null]
      })]
    })
  });
}

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