/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { FormattedMessage } from 'react-intl-next';
import ErrorIcon from '@atlaskit/icon/core/status-error';
import { messages } from '../../../messages';
import { HoverCard } from '../../HoverCard';
import { ActionButton } from '../common/action-button';
import { Frame } from '../Frame';
import { IconAndTitleLayout } from '../IconAndTitleLayout';
const fallbackIcon = () => {
  return /*#__PURE__*/React.createElement(ErrorIcon, {
    color: "var(--ds-icon-danger, #C9372C)",
    label: "error",
    testId: "errored-view-default-icon"
  });
};
export const InlineCardErroredView = ({
  url,
  onClick,
  isSelected,
  testId = 'inline-card-errored-view',
  icon,
  message,
  onRetry,
  truncateInline,
  showHoverPreview
}) => {
  const frameRef = React.useRef(null);
  const hashAction = !!onRetry;
  const handleRetry = React.useCallback(event => {
    if (onRetry) {
      event.preventDefault();
      event.stopPropagation();
      onRetry();
    }
  }, [onRetry]);
  const renderActionButton = React.useCallback(() => {
    return onRetry && /*#__PURE__*/React.createElement(ActionButton, {
      onClick: handleRetry
    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
  }, [handleRetry, onRetry]);
  const content = /*#__PURE__*/React.createElement(Frame, {
    link: hashAction ? undefined : url,
    onClick: hashAction ? undefined : onClick,
    isSelected: isSelected,
    ref: frameRef,
    testId: testId,
    truncateInline: truncateInline
  }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
    icon: icon || fallbackIcon(),
    link: hashAction ? url : undefined,
    title: url,
    onClick: hashAction ? onClick : undefined,
    rightSide: message
  }), renderActionButton());
  if (showHoverPreview) {
    return /*#__PURE__*/React.createElement(HoverCard, {
      url: url
    }, content);
  }
  return content;
};