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 NotFound() {
    const Video = lazy(() => import("./Video"))
    return (
        <>
            <Heading as="h1" style={styles.retroFontHeader}>
                404 :(
            </Heading>
            <Heading
                as="h3"
                style={{fontSize: '2.5rem', marginBottom: '2rem', marginLeft: '5rem'}}
            >
                It looks like you hit a{' '}
                {<span style={styles.retroFontBody}>DEAD</span>} end!
            </Heading>
            <Button colorPalette='blue' asChild style={{fontSize: '1.2rem', marginLeft: '5rem'}}>
                <Link to={'/games'}>Back to Games List</Link>
            </Button>
            <Suspense fallback={<LoadingModal />}>
                <Video/>
            </Suspense>
        </>
    )
}