import styles from "./PreliminaryRoundResults.module.scss"

import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
import StepHeader from "../../components/stepsHeader/StepHeader";
import goodJobIcon from "../../assets/icons/good_job.svg";
import { closeCircle, checkmarkCircle } from "ionicons/icons";
import { Link } from "react-router-dom";
import Quiz_Details from '../../mockData/QuizDetails';

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

    return (
        <IonPage>
            <StepHeader stepNumber={2} roundName="Preliminary Round" />
            <IonContent className={styles.preliminaryRoundResultsContent}>
                <div className={styles.quizResultsContainer}>
                    <div className={styles.upfold}>
                        <IonIcon src={goodJobIcon} />
                        <div className={styles.score}>
                            <h5>You have scored</h5>
                            <h5 className={styles.result}>{(parseInt(localStorage.getItem("answer")!) / Quiz_Details.length) * 100}%</h5>
                        </div>
                        <p className={styles.description}>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
                        </p>
                    </div>
                    <div className={styles.quizResults}>
                        <h5>Quiz Results</h5>
                        <div className={styles.resultsHolder}>
                            <div className={styles.correct}>
                                <IonIcon icon={checkmarkCircle} />
                                <div>{localStorage.getItem("answer")} Questions</div>
                            </div>
                            <div className={styles.wrong}>
                                <IonIcon icon={closeCircle} />
                                <div>{Quiz_Details.length - parseInt(localStorage.getItem("answer")!)} Questions</div>
                            </div>
                        </div>
                        <div className={styles.buttonHolder}>
                            <Link to="/" >
                                <IonButton shape="round">Goto Dashboard</IonButton>
                            </Link>
                            <Link to="/interviewRounds" >
                                <IonButton shape="round" class={styles.goToNextStep}>Goto Next Step</IonButton>
                            </Link>
                        </div>
                    </div>
                </div>
            </IonContent>
        </IonPage >

    )
}

export default PreliminaryRoundResults;