import React, {useState} from "react";
import QuestionItem from "../QuestionItem/QuestionItem.tsx";
import AddQuestionButton from "../AddQuestionButton/AddQuestionButton.tsx";

interface QuestionsListProps {}

interface Question {
    id: number;
}

const QuestionsList: React.FC<QuestionsListProps> = () => {
    const [questions, setQuestions] = useState<Question[]>([
        {id: 1},
    ]);

    const handleAddQuestion = () => {
        // Find the highest ID in the current questions list
        const maxId = questions.reduce((max, question) => Math.max(max, question.id), 0);
        const newQuestion: Question = {
            id: maxId + 1, // Increment the ID
        };
        setQuestions([...questions, newQuestion]); // Add the new question to the state
    };

    return (
        <>
            {questions.map((question, index) => (
                <QuestionItem
                    key={question.id}
                    indexQuestion={index + 1}
                />
            ))}
            <AddQuestionButton onClick={handleAddQuestion} />
        </>
    );
};

export default QuestionsList;