import Icon from '../icon';
import Pop from '../pop';

const stackTraceStyle: React.CSSProperties = {
  whiteSpace: 'pre',
};

export default function ErrorBoundaryFallbackComponent({
  componentStack,
  error,
}) {
  return (
    <div className="zent-error-boundary-fallback-component">
      <div className="zent-error-boundary-fallback-component__error">
        <Pop
          trigger="hover"
          position="auto-bottom-center"
          centerArrow
          content={<div style={stackTraceStyle}>{componentStack}</div>}
        >
          <Icon type="close-circle" />
        </Pop>
        <span>{error.toString()}</span>
      </div>
    </div>
  );
}