import { Check, Info, Cross, ClockBorderless, Alert } from '@transferwise/icons';
import { Breakpoint } from '@transferwise/neptune-tokens';
import { clsx } from 'clsx';
import { useIntl } from 'react-intl';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import { Size } from '../common/propsValues/size.mjs';
import '../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 { Status } from '../common/propsValues/status.mjs';
import { Sentiment } from '../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 'react';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx } from 'react/jsx-runtime';
import Circle from '../common/circle/Circle.mjs';
import { useMedia } from '../common/hooks/useMedia.mjs';
import messages from './StatusIcon.messages.mjs';

const mapLegacySize = {
  [String(Size.SMALL)]: 16,
  [String(Size.MEDIUM)]: 40,
  [String(Size.LARGE)]: 48
};
const StatusIcon = ({
  id,
  sentiment = 'neutral',
  size: sizeProp = 40,
  iconLabel
}) => {
  const intl = useIntl();
  const iconMetaBySentiment = {
    [Sentiment.NEGATIVE]: {
      Icon: Cross,
      defaultIconLabel: intl.formatMessage(messages.errorLabel)
    },
    [Sentiment.POSITIVE]: {
      Icon: Check,
      defaultIconLabel: intl.formatMessage(messages.successLabel)
    },
    [Sentiment.WARNING]: {
      Icon: Alert,
      defaultIconLabel: intl.formatMessage(messages.warningLabel)
    },
    [Status.PENDING]: {
      Icon: ClockBorderless,
      defaultIconLabel: intl.formatMessage(messages.pendingLabel)
    },
    [Sentiment.NEUTRAL]: {
      Icon: Info,
      defaultIconLabel: intl.formatMessage(messages.informationLabel)
    },
    // deprecated
    [Sentiment.ERROR]: {
      Icon: Cross,
      defaultIconLabel: intl.formatMessage(messages.errorLabel)
    },
    [Sentiment.INFO]: {
      Icon: Info,
      defaultIconLabel: intl.formatMessage(messages.informationLabel)
    },
    [Sentiment.SUCCESS]: {
      Icon: Check,
      defaultIconLabel: intl.formatMessage(messages.successLabel)
    }
  };
  const {
    Icon,
    defaultIconLabel
  } = iconMetaBySentiment[sentiment];
  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
  const size = mapLegacySize[sizeProp] ?? sizeProp;
  return /*#__PURE__*/jsx(Circle, {
    size: isTinyViewport && size < 40 ? 32 : size,
    "data-testid": "status-icon",
    className: clsx('status-circle', sentiment),
    id: id,
    children: /*#__PURE__*/jsx(Icon, {
      className: "status-icon",
      title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
    })
  });
};

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