import { AlertCircleFill, Alert } from '@transferwise/icons';
import { useTheme } from '@wise/components-theming';
import { clsx } from 'clsx';
import { AvatarType } from '../avatar/avatarTypes.mjs';
import Avatar from '../avatar/Avatar.mjs';
import Body from '../body/Body.mjs';
import Button from '../button/src/Button.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import { ControlType, Priority } from '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import { Size } from '../common/propsValues/size.mjs';
import { Typography } from '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import 'react';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import Title from '../title/Title.mjs';

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

export { CriticalCommsBanner as default };
//# sourceMappingURL=CriticalCommsBanner.mjs.map
