import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import classNames from "classnames";
import Image, { StaticImageData } from "next/image";
import React, { ReactNode, useEffect } from "react";

import classes from "./classes.module.scss";
import Footer from "@Front/Components/DesignSystem/Footer";

type IProps = {
	title: string;
	children?: ReactNode;
	/**
	 * @description scroll top with number or disabled with null
	 */
	scrollTop?: number | null;
	image: StaticImageData;
	type?: "background" | "image";
	showHeader?: boolean;
};

export default function DefaultDoubleSidePage(props: IProps) {
	const { title, children, scrollTop = 0, image, type = "background", showHeader = false } = props;

	useEffect(() => {
		window.document.title = title;
		if (scrollTop !== null) {
			window.scrollTo(0, scrollTop);
		}
	}, [scrollTop, title]);

	return (
		<div className={classes["root"]}>
			<Header isUserConnected={showHeader} />
			<div className={classes["content"]}>
				<div className={classNames(classes["sides"], classes["side-left"])}>{children}</div>
			</div>
			<Version />
			{type === "image" && (
				<div className={classes["image-container"]}>
					<Image alt={"right side image"} src={image} className={classes["image"]} />
				</div>
			)}
			{type === "background" && (
				<div className={classes["background-image-container"]}>
					<Image alt={"right side image"} src={image} className={classes["background-image"]} priority />
				</div>
			)}
			<Footer hasLeftPadding />
		</div>
	);
}