/** @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 const InlineImageCardErrorView = ({
  testId = 'media-inline-image-card-error-view',
  message,
  icon,
  height = ICON_SIZE_THRESOLD
}) => {
  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, ${R300})`
  }))));
};