import { useContext } from 'react';
import { Link } from 'react-router-dom';

import SignUpLogo from '../../Components/Layout/SignUpLogo';
import BmimLogo from '../../Components/UI/Images/Logo/BmimLogo';
import environment from '../../Environments/environment';
import type { GlobalStateModel } from '../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../Store/global/GlobalState-context';
import PaidOk from './PaidOk';
import styles from './PaidOk.module.scss';

const logoStyle = {
	margin: '35px'
};

const SuccessPaidPage = (): JSX.Element => {
	const { landingPage, joinCompany } = environment.frontendRoutes;
	const globalContext: GlobalStateModel = useContext(GlobalStateContext);
	return (
		<div className={styles.container}>
			{/* <BmimLogo bmimClass={styles.logo} bmimLogoName="bmim-cash-flow-logo-s.png" /> */}

			<div style={logoStyle}>
				<SignUpLogo logoClass={styles.logo} />
			</div>
			<div className={styles.container__main}>
				<PaidOk />
				<h4 style={{ textTransform: 'none' }}>Payment completed</h4>
				<p>Thank you for your payment. A confirmation email has been sent to your email address</p>
				{/* <Link to={typeof globalContext.companies !== 'string' ? landingPage : joinCompany}> */}
				<Link to={'/dashboard'}>To moneyXplier®</Link>
			</div>
		</div>
	);
};

export default SuccessPaidPage;