import styles from './PreliminaryRound.module.scss';

import preliminaryRound from '../../assets/icons/Preliminary_Round.svg';
import { IonButton, IonContent, IonIcon, IonPage } from '@ionic/react';
import StepHeader from '../../components/stepsHeader/StepHeader';
import questionIcon from '../../assets/icons/question-circle-fill.svg';
import checkIcon from '../../assets/icons/check-circle-fill.svg';
import timeIcon from '../../assets/icons/time.svg';

const PreliminaryRound: React.FC = () => {
    return (
        <IonPage>
            <StepHeader stepNumber={2} roundName="Preliminary Round" />
            <IonContent>
                <div className={styles.roundDescription}>

                    <IonIcon src={preliminaryRound}></IonIcon>
                    <h4 className={styles.heading}>Let us check your knowledge.</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>
                <div className={styles.quizDescription}>

                    <h4 className={styles.heading}>Quiz</h4>
                    <div className={styles.description}>
                        <div className={styles.textHolder}>
                            <IonIcon src={questionIcon}></IonIcon>
                            <div className={styles.text}>20 questions</div>
                        </div>
                        <div className={styles.textHolder}>
                            <IonIcon src={timeIcon}></IonIcon>
                            <div className={styles.text}>20 mins + 10 mins grace</div>
                        </div>
                        <div className={styles.textHolder}>
                            <IonIcon src={checkIcon}></IonIcon>
                            <div className={styles.text}>Note: 85% of results minimum</div>
                        </div>
                    </div>

                    <IonButton shape="round" expand='block'>Start quiz</IonButton>

                    <div className={styles.wish}>All the best!</div>
                </div>
            </IonContent>
        </IonPage>
    )
}

export default PreliminaryRound;