import React from "react";

import { ArrowForwardOutlined } from "@mui/icons-material";
import { Button } from "@mui/material";
import style from "./PurchaseConfirmationPage.module.css";

function PurchaseConfirmationPage() {

	const redirectToHome = () => {
		window.location.href = "/";
	};

	return (
		<div className={style.container}>
			<div className={style.box}>
				<img src="/assets/success_icon.png" width={100} />
				<p className={style.title}>Thank You For Your Purchase</p>
				<p className={style.description}>
					You will shortly receive an email with credentials to start using your
					purchased products. Invoice with billing details will be attached in the
					same email.{" "}
				</p>
				<p className={style.order_no}>Order #28994</p>
				<Button
					fullWidth
					variant="contained"
					disabled={false}
					onClick={redirectToHome}
				>
					Go to Home
					<ArrowForwardOutlined sx={{ marginLeft: "0.5rem", fontSize: 20 }} />
				</Button>
			</div>
		</div>
	);
}

export default PurchaseConfirmationPage;
