/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import styles from './shared.css';

type Props = {
  callStack: string | null,
  children: React$Node,
  componentStack: string | null,
  errorMessage: string | null,
};

export default function UnsupportedBridgeOperationView({
  callStack,
  children,
  componentStack,
  errorMessage,
}: Props): React.Node {
  return (
    <div className={styles.ErrorBoundary}>
      {children}
      <div className={styles.ErrorInfo}>
        <div className={styles.HeaderRow}>
          <div className={styles.ErrorHeader}>
            {errorMessage || 'Bridge protocol mismatch'}
          </div>
        </div>
        <div className={styles.InfoBox}>
          An incompatible version of <code>react-devtools-core</code> has been
          embedded in a renderer like React Native. To fix this, update the{' '}
          <code>react-devtools-core</code> package within the React Native
          application, or downgrade the <code>react-devtools</code> package you
          use to open the DevTools UI.
        </div>
        {!!callStack && (
          <div className={styles.ErrorStack}>
            The error was thrown {callStack.trim()}
          </div>
        )}
      </div>
    </div>
  );
}