import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Box from '@mui/material/Box';
import { styled } from '@mui/system';

const Container = styled(Box)`
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
`;

const Content = styled(Box)`
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
`;

export default function Error({ error = undefined }: { error?: Error }) {
  const { t } = useLocaleContext();

  return (
    <Container>
      <Content>{error?.message || t('common.error')}</Content>
      <Content>{error?.stack || t('common.error')}</Content>
    </Container>
  );
}
