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

const Assignment: React.FC = () => {

    return (
        <IonPage>
            <StepHeader stepNumber={4} roundName="Assignment" />
            <IonContent className={styles.assignment}>

                <div className={styles.description}>
                    <div className={styles.icon}>
                        <IonIcon src={assignmentImage} />
                    </div>

                    <div className={styles.stepDescription}>
                        <h4>You are one step ahead to the final round</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>

                <Link to="/assignmentDetails"
                    className={styles.assignmentButton}>
                    <IonButton shape="round" expand='block'>Show Details</IonButton>
                </Link>
            </IonContent>
        </IonPage>
    );
}

export default Assignment;