import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import classes from "./classes.module.scss";
import SubscriptionTicket from "../SubscriptionTicket";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import MessageBox from "@Front/Components/Elements/MessageBox";
import SubscriptionClientInfos from "../SubscriptionClientInfos";
import Button from "@Front/Components/DesignSystem/Button";

export default function SubscriptionError() {
	return (
		<DefaultTemplate title="Erreur à la souscription" hasHeaderLinks={false}>
			<div className={classes["root"]}>
				<div className={classes["left"]}>
					<div className={classes["title"]}>
						<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
							Paiement échoué
						</Typography>
					</div>
					<div className={classes["alert"]}>
						<MessageBox type={"error"}>
							Votre transaction n'a pas pu être complétée.
							<br />
							<br />
							Malheureusement, nous n'avons pas pu traiter votre paiement et votre abonnement n'a pas été activé. Veuillez
							vérifier vos informations de paiement et essayer à nouveau.
						</MessageBox>
					</div>
					<div className={classes["separator"]} />
					<div className={classes["client-infos"]}>
						<SubscriptionClientInfos />
					</div>
					<div className={classes["separator"]} />
					<Button>Réessayer le paiement</Button>
				</div>
				<div className={classes["right"]}>
					<SubscriptionTicket />
				</div>
			</div>
		</DefaultTemplate>
	);
}