import React, { FC } from 'react';
import { FallbackProps } from 'react-error-boundary';
import {
  Page,
  Box,
  Text,
  Heading,
  IconCircled,
  icons,
} from '@polymathnetwork/polymesh-ui';

export const ErrorBoundaryPage: FC<FallbackProps> = ({ error }) => {
  return (
    <>
      <Page>
        <Box mt="xxl">
          <IconCircled
            Asset={icons.SvgCrossOutline}
            scale={0.7}
            bg="red.1"
            color="red.0"
          />
        </Box>
        <Box mt="m">
          <Text fontSize="5" fontWeight="semiBold" color="highlightText">
            An error occurred
          </Text>
        </Box>
        <Box mt="m">
          <Text>Please refresh the page to reconnect.</Text>
        </Box>
        {error && (
          <Box mt="xl">
            <Heading variant="h5">Error details</Heading>
            <Box mt="m">
              <Text>{error?.message}</Text>
            </Box>
          </Box>
        )}
      </Page>
    </>
  );
};
