Untitled

import React, { useState, useEffect } from 'react';
import { Box, Button, Text, VStack } from '@chakra-ui/react';

const Question = ({ question, onAnswer }) => {
    const [selectedAnswer, setSelectedAnswer] = useState(null);
    const [feedback, setFeedback] = useState(null);

    useEffect(() => {
        if (selectedAnswer !== null) {
            const isCorrect = selectedAnswer === question.correct_answer;
            setFeedback(isCorrect ? 'correct' : 'incorrect');
            setTimeout(() => {
                setSelectedAnswer(null);
                setFeedback(null);
                onAnswer(isCorrect);
            }, 1000);
        }
    }, [selectedAnswer, question.correct_answer, onAnswer]);

    const answers = [question.correct_answer, ...question.incorrect_answers].sort();

    return (
        <VStack spacing={4}>
            <Text fontSize="xl">{question.question}</Text>
            {answers.map((answer, index) => (
                <Button
                    key={index}
                    colorScheme={feedback && selectedAnswer === answer ? (feedback === 'correct' ? 'green' : 'red') : 'blue'}
                    onClick={() => setSelectedAnswer(answer)}
                    isDisabled={feedback !== null}
                >
                    {answer}
                </Button>
            ))}
        </VStack>
    );
};

export default Question;