/**

 * 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 Button from '../Button';

import ButtonIcon from '../ButtonIcon';

import styles from './shared.css';

type Props = {

  callStack: string | null,

  children: React$Node,

  componentStack: string | null,

  dismissError: Function,

  errorMessage: string | null,

};

export default function TimeoutView({

  callStack,

  children,

  componentStack,

  dismissError = null,

  errorMessage,

}: Props): React.Node {

  return (

    <div className={styles.ErrorBoundary}>

      {children}

      <div className={styles.ErrorInfo}>

        <div className={styles.HeaderRow}>

          <div className={styles.TimeoutHeader}>

            {errorMessage || 'Timed out waiting'}

          </div>

          <Button className={styles.CloseButton} onClick={dismissError}>

            Retry

            <ButtonIcon className={styles.CloseButtonIcon} type="close" />

          </Button>

        </div>

        {!!componentStack && (

          <div className={styles.TimeoutStack}>

            The timeout occurred {componentStack.trim()}

          </div>

        )}

      </div>

    </div>

  );

}