import Seo from "components/SEO"
import Template from "components/window/Template"
import { NextPage } from "next"
import Image from "next/image"
import styles from "styles/pages/404.module.css"
let noSelect = {
    userSelect: "none",
    msUserSelect: "none",
    MozUserSelect: "none",
    WebkitUserSelect: "none"
}
let images = ["RIP.svg", "ThumbsDown.svg", "Facepalm.svg", "Petra_Rage.svg", "Azula_Rage.gif"]

const ErrorPage:NextPage = () => {
// Use MainWindow and add the image to it instead of no bg
    return (
        <>
        <Seo templateTitle="404"
        robots="noindex" />
    <Template >
        <div className="w-full
        grid text-center gap-0">
            <div>
            
                <div className="grid place-items-center h-[150%]">

                <div className="w-full h-[23vh]">
                    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
                        <Image
                            alt='Not found image'
                            src={`/assets/${images[Math.floor(Math.random() * images.length)]}`}
                            layout='fill'
                            objectFit='contain'
                            style={noSelect}
                        />
                    </div>
                    </div>
                    </div>
                <br />
                <h1 className={styles.text} style={noSelect}>
                    Page not found
                </h1>
            </div>
        </div>

    </Template>
    </>
    )
}
export default ErrorPage