import { IonButton, IonContent, IonPage } from '@ionic/react';
import './style.css';

import { Helloworld } from '../../../public_data/index';
import { useEffect, useState } from 'react';
import { HelloworldImage } from '../../../components/HelloworldImage';
import { useParams } from 'react-router';
import QuestionCard from './QuestionCard';
import CorrectionCard from './CorrectionCard';

const CorrectionRoute: React.FC = () => {
  const { p_route } = useParams<{ p_route: string }>();

  const question_list = [
    {
      question_num: 1,
      text: 'helloworld',
      sound: 'helloworld.mp4'
    }
  ];

  const [current_question, setCurrentQuestion] = useState(1);
  const [num_correct, setNumCorrect] = useState(0);
  const nextQuestion = () => {
    setCurrentQuestion(current_question + 1);
  };
  const incNumCorrect = () => {
    setNumCorrect(num_correct + 1);
  };

  return (
    <IonPage>
      <IonContent fullscreen>
        <div>Correction</div>
        <div>{p_route}</div>
        <CorrectionCard
          num_correct={num_correct}
          incNumCorrect={incNumCorrect}
          //
          question_num={current_question}
          nextQuestion={nextQuestion}
        />
      </IonContent>
    </IonPage>
  );
};

export default CorrectionRoute;
