'use client'
import React, {useEffect, useRef, useState} from 'react';
import FlashCard from "@/app/components/FlashCard";
import {getRandomQuestion} from "../util/AudioService"
import AnswerTracker from "@/app/components/AnswerTracker";

function QuizCard({group}) {

    const [showNextQuestion, setNextQuestion] = useState(false);
    const [question, setQuestion] = useState();
    const correctRef = useRef(0);
    const wrongRef = useRef(0);

    function getNextQuestion() {
        let data = getRandomQuestion(group)
        setQuestion(data)
        console.log("init question")
        console.log(data)
        setNextQuestion(false)
    }

    useEffect(() => {
        let data = getRandomQuestion(group)
        console.log("init question")
        console.log(data)

        setQuestion(data)
        setNextQuestion(false)
    }, [])

    return (<div className="flex flex-col mx-auto">

        <FlashCard q={question} shouldFlip={showNextQuestion}
                   setShouldFlip={setNextQuestion} getNextQuestion={getNextQuestion} wrongRef={wrongRef}
                   correctRef={correctRef}></FlashCard>
        <AnswerTracker correctRef={correctRef} wrongRef={wrongRef}></AnswerTracker>

    </div>);
}

export default QuizCard;