import styles from "./celebration.module.scss";
import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
import StepHeader from "../../components/stepsHeader/StepHeader";
import celebration from "../../assets/icons/Celebrations.svg";
import { Link } from "react-router-dom";

const Celebration: React.FC = () => {
    return (
        <IonPage>
            <StepHeader stepNumber={8} roundName="Celebration" />
            <IonContent className={styles.celebrationContent}>
                <div className={styles.celebrationDescription}>
                    <IonIcon src={celebration} />
                    <h4 className={styles.heading}>We have verified your Docs</h4>
                    <p className={styles.description}>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
                <Link to="/" className={styles.workexButton}>
                    <IonButton shape="round" expand="block">Join workex</IonButton>
                </Link>

            </IonContent>
        </IonPage >
    );
}

export default Celebration;