import { useId } from 'react';
import { Breakpoint } from '@transferwise/neptune-tokens';
import { clsx } from 'clsx';
import Body from '../../body/Body.mjs';
import Button from '../../button/Button.resolver.mjs';
import '../../common/theme.mjs';
import '../../common/direction.mjs';
import '../../common/propsValues/control.mjs';
import '../../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 '@transferwise/formatting';
import '@transferwise/icons';
import 'react-intl';
import '../../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
import { useScreenSize } from '../../common/hooks/useScreenSize.mjs';
import { renderPromptMedia } from '../helpers/promptMedia.mjs';

const ActionPrompt = ({
  sentiment = 'neutral',
  title,
  description,
  onDismiss,
  media = {},
  action,
  actionSecondary,
  id,
  className,
  'data-testid': testId,
  'aria-label': ariaLabel
}) => {
  const isMobile = !useScreenSize(Breakpoint.SMALL);
  const mediaId = useId();
  const titleId = useId();
  const descId = useId();
  const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel ? undefined : titleId].filter(Boolean).join(' ');
  const renderMedia = () => renderPromptMedia({
    media,
    sentiment,
    mediaId,
    imgClassName: 'wds-action-prompt--media-image'
  });
  return /*#__PURE__*/jsx(PrimitivePrompt, {
    id: id,
    sentiment: sentiment,
    "data-testid": testId,
    className: clsx('wds-action-prompt', {
      'wds-action-prompt--with-two-actions': !!actionSecondary
    }, className),
    media: renderMedia(),
    actions: /*#__PURE__*/jsxs(Fragment, {
      children: [actionSecondary &&
      /*#__PURE__*/
      // @ts-expect-error onClick type mismatch
      jsx(Button, {
        v2: true,
        size: "md",
        priority: "secondary",
        href: actionSecondary.href,
        block: isMobile,
        onClick: actionSecondary?.onClick,
        children: actionSecondary.label
      }), /*#__PURE__*/jsx(Button, {
        v2: true,
        size: "md",
        priority: "primary",
        href: action.href,
        block: isMobile,
        onClick: action.onClick,
        children: action.label
      })]
    }),
    role: "region",
    onDismiss: onDismiss,
    ...(ariaLabel ? {
      'aria-label': ariaLabel
    } : {
      'aria-labelledby': ariaLabelledByIds,
      'aria-describedby': descId
    }),
    children: /*#__PURE__*/jsxs("div", {
      className: clsx('d-flex', 'flex-column', 'justify-content-center'),
      children: [/*#__PURE__*/jsx(Body, {
        id: titleId,
        type: Typography.BODY_LARGE_BOLD,
        className: "wds-action-prompt__content",
        children: title
      }), description && /*#__PURE__*/jsx(Body, {
        id: descId,
        className: "wds-action-prompt__content",
        children: description
      })]
    })
  });
};

export { ActionPrompt };
//# sourceMappingURL=ActionPrompt.mjs.map
