/** @jsx jsx */

import { jsx } from '@emotion/react';
import WarningIcon from '@atlaskit/icon/glyph/warning';
import { R300 } from '@atlaskit/theme/colors';
import Tooltip from '@atlaskit/tooltip';
import { ICON_SIZE_THRESOLD } from './constants';
import { Frame } from './frame';
import { IconWrapper } from './icon-wrapper';
export var InlineImageCardErrorView = function InlineImageCardErrorView(_ref) {
  var _ref$testId = _ref.testId,
    testId = _ref$testId === void 0 ? 'media-inline-image-card-error-view' : _ref$testId,
    message = _ref.message,
    icon = _ref.icon,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? ICON_SIZE_THRESOLD : _ref$height;
  return jsx(Frame, {
    testId: testId
  }, jsx(Tooltip, {
    content: message,
    position: "top",
    tag: "span",
    hideTooltipOnClick: true
  }, jsx(IconWrapper, null, icon || jsx(WarningIcon, {
    label: "error",
    size: height > ICON_SIZE_THRESOLD ? 'medium' : 'small',
    primaryColor: "var(--ds-icon-danger, ".concat(R300, ")")
  }))));
};