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

const iconTypeMap = {
  positive: Check,
  neutral: Info,
  warning: Alert,
  negative: Cross,
  pending: ClockBorderless,
  info: Info,
  error: Cross,
  success: Check
};
const mapLegacySize = {
  [String(Size.SMALL)]: 16,
  [String(Size.MEDIUM)]: 40,
  [String(Size.LARGE)]: 48
};
const StatusIcon = ({
  sentiment = 'neutral',
  size: sizeProp = 'md'
}) => {
  const Icon = iconTypeMap[sentiment];
  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
  return /*#__PURE__*/jsx(Circle, {
    as: "span",
    size: size,
    "data-testid": "status-icon",
    className: clsx('status-circle', `status-circle-${sizeProp}`, sentiment),
    children: /*#__PURE__*/jsx(Icon, {
      className: clsx('status-icon', iconColor)
    })
  });
};

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