import React, { useState } from 'react';
import Question from './Question';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../App.css';

function Questions({ questions }) {
    const [currentQuestion, setCurrentQuestion] = useState(0);
    const [score, setScore] = useState(0);

    const handleNextQuestion = () => {
        setCurrentQuestion(prevQuestion => prevQuestion + 1);
    };

    return (
        <div className="container mt-5">
            {questions.length > 0 && currentQuestion < questions.length ? (
                <Question
                    question={questions[currentQuestion]}
                    setCurrentQuestion={setCurrentQuestion}
                    setScore={setScore}
                    score={score}
                    handleNextQuestion={handleNextQuestion}
                />
            ) : (
                <h1>No more questions!</h1>
            )}
        </div>
    );
}

export default Questions;