import imgSrc from '@/assets/generic-error.png';
import { Button, Container, Stack, Typography } from '@mui/material';
import { useCallback } from 'react';

function GenericErrorPage() {
  const onReload = useCallback(() => location.reload(), []);
  return (
    <Container>
      <Stack alignItems="center" px={2} py={{ xs: 4, sm: 8 }} spacing={2} textAlign="center">
        <img alt="Error" src={imgSrc} style={{ width: '100%', maxWidth: 450 }} />
        <Typography variant="h2">Ops! An error occurred...</Typography>
        <Typography>We&#39;re fixing the problem. Please try again later.</Typography>
        <Button onClick={onReload} variant="contained">
          Reload
        </Button>
      </Stack>
    </Container>
  );
}

export { GenericErrorPage };