import Button from "@Front/Components/DesignSystem/Button";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import Module from "@Front/Config/Module";
import Link from "next/link";
import BasePage from "../Base";
import classes from "./classes.module.scss";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";

import backgroundImage from "@Assets/images/404-background-image.jpeg";

export default class PageNotFound extends BasePage {
	public override render(): JSX.Element {
		return (
			<DefaultDoubleSidePage title={"Project Not Found"} image={backgroundImage} type="background" showHeader>
				<div className={classes["root"]}>
					<div className={classes["content"]}>
						<Typography typo={ETypo.DISPLAY_LARGE}>Erreur 404</Typography>
						<Typography typo={ETypo.TEXT_LG_REGULAR} className={classes["text"]}>
							La page que vous recherchez semble introuvable.
						</Typography>
						<Link href={Module.getInstance().get().modules.pages.Home.props.path}>
							<Button>Retour à l'accueil</Button>
						</Link>
					</div>
				</div>
			</DefaultDoubleSidePage>
		);
	}
}