/* main.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./main.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { defineMessages, useIntl } from 'react-intl-next';
import Heading from '@atlaskit/heading';
import AutomationIcon from '@atlaskit/icon/core/automation';
import { ModalHeader, useModal } from '@atlaskit/modal-dialog';
import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
import { useAutomationMenu } from '../../menu-context';
const styles = {
  iconStyle: "_2rko12b0 _18zr1b66 _1rjcv77o _2hwxutpp",
  modalDescriptionStyle: "_19pkutpp"
};
const i18n = defineMessages({
  modalHeaderIconLabel: {
    id: 'automation-menu.modal.header.icon.label',
    defaultMessage: 'Automation modal header icon',
    description: 'A label for the icon in the header of the automation modal.'
  }
});
export const AutomationModalHeader = ({
  modalTitle,
  modalDescription
}) => {
  const {
    formatMessage
  } = useIntl();
  const {
    initialised,
    rules
  } = useAutomationMenu();
  const {
    titleId
  } = useModal();
  const showDescription = initialised && rules.length > 0 && !!modalDescription;
  return /*#__PURE__*/React.createElement(ModalHeader, {
    hasCloseButton: true
  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Inline, {
    alignBlock: "center"
  }, /*#__PURE__*/React.createElement(Box, {
    xcss: styles.iconStyle
    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
    ,
    backgroundColor: "color.background.accent.green.subtlest"
  }, /*#__PURE__*/React.createElement(AutomationIcon, {
    size: "small",
    label: formatMessage(i18n.modalHeaderIconLabel),
    color: "var(--ds-icon-accent-green, #22A06B)",
    spacing: "compact"
  })), /*#__PURE__*/React.createElement(Heading, {
    size: "medium",
    id: titleId
  }, modalTitle)), showDescription && /*#__PURE__*/React.createElement(Box, {
    xcss: styles.modalDescriptionStyle
  }, modalDescription)));
};