Untitled

import React, { useState, useEffect, useRef } from "react";

function Question({ question, totalQuestions, currentQuestion, setAnswer }) {
  const [selectedOption, setSelectedOption] = useState(null);
  const timer = useRef(null);
  const progressBar = useRef(null);

  useEffect(() => {
    progressBar.current.classList.remove("active");
    setTimeout(() => {
      progressBar.current.classList.add("active");
    }, 0);
    timer.current = setTimeout(() => {
      setAnswer(selectedOption);
      setSelectedOption(null);
    }, 10 * 1000);

    return () => {
      clearTimeout(timer.current);
    };
  }, [question, selectedOption, setAnswer]);

  return (
    <div className="question">
      <div className="progress-bar" ref={progressBar}></div>
      <div className="question-count">
        <b> {currentQuestion} </b> of <b> {totalQuestions} </b>
      </div>
      <div className="main">
        <div className="title">
          <span>Question:</span>
          <p>{question.title}</p>
        </div>
        <div className="options">
          {question.options.map((option, index) => (
            <div
              className={index === selectedOption ? "option active" : "option"}
              key={index}
              onClick={() => setSelectedOption(index)}
            >
              {option}
            </div>
          ))}
        </div>
      </div>
      <div className="control">
        <button onClick={() => setAnswer(selectedOption)}>Next</button>
      </div>
    </div>
  );
}

export default Question;