import { Cross, Check, Alert, ClockBorderless, Info } from '@transferwise/icons';
import { clsx } from 'clsx';
import { useIntl } from 'react-intl';
import Circle from '../common/circle/Circle.mjs';
import { useMedia } from '../common/hooks/useMedia.mjs';
import messages from './StatusIcon.messages.mjs';
import { jsx } from 'react/jsx-runtime';
import { Sentiment } from '../common/propsValues/sentiment.mjs';
import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
import { Size } from '../common/propsValues/size.mjs';

const mapLegacySize = {
  [String(Size.SMALL)]: 16,
  [String(Size.MEDIUM)]: 40,
  [String(Size.LARGE)]: 48
};
const StatusIcon = ({
  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)
    },
    [Sentiment.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 iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
  const size = mapLegacySize[sizeProp] ?? sizeProp;
  return /*#__PURE__*/jsx(Circle, {
    as: "span",
    size: isTinyViewport && size < 40 ? 32 : size,
    "data-testid": "status-icon",
    className: clsx('status-circle', sentiment),
    children: /*#__PURE__*/jsx(Icon, {
      className: clsx('status-icon', iconColor),
      title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
    })
  });
};

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