import React, {lazy, Suspense} from 'react'
import {Link} from 'react-router-dom'
import {Button, Heading} from '@chakra-ui/react'
import LoadingModal from "../components/LoadingModal";

const styles = {
    retroFontHeader: {
        fontFamily: ['RetroGaming', 'sans-serif'].join(','),
        fontSize: '4.3rem',
        marginLeft: '5rem',
        marginTop: '5rem'
    },
    retroFontBody: {
        fontFamily: ['RetroGaming', 'sans-serif'].join(','),
    },
}

export default function SomethingWentWrong() {
    const Video = lazy(() => import("./Video"))
    return (
        <>
            <Heading as="h1" style={styles.retroFontHeader}>
                Something Went Wrong
            </Heading>
            <Heading
                as="h3"
                style={{fontSize: '2.5rem', marginBottom: '2rem', marginLeft: '5rem'}}
            >
                {<span style={styles.retroFontBody}>WE APOLOGIZE!</span>}<br/>
                Please contact the website administrator!
            </Heading>
            <Button colorPalette='blue' asChild style={{fontSize: '1.2rem', marginLeft: '5rem'}}>
                <Link to={'/games'}>
                <div style={{marginTop: '.25rem'}}>
                    Back to Games List
                </div>
                </Link>
            </Button>
            <Suspense fallback={<LoadingModal/>}>
                <Video/>
            </Suspense>
        </>
    )
}