Sustainable Agriculture Knowledge Quiz

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const questions = [
  {
    question: "Which of the following is NOT a good environmental practice in agriculture?",
    options: ["Crop rotation", "Excessive pesticide use", "Water conservation", "Biodiversity preservation"],
    answer: 1,
    explanation: "Excessive pesticide use can harm ecosystems, contaminate water sources, and reduce soil health."
  },
  {
    question: "What is the main purpose of the Environment Act 2021?",
    options: ["To regulate farm subsidies", "To set legally binding targets for environmental improvement", "To establish health and safety rules for workers", "To promote agritourism"],
    answer: 1,
    explanation: "This act aims to improve air quality, water management, biodiversity, and waste reduction."
  },
  // Add more questions following the same format
];

export default function Quiz() {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [showExplanation, setShowExplanation] = useState(false);
  
  const handleAnswer = (index) => {
    setSelectedAnswer(index);
    setShowExplanation(true);
  };

  const nextQuestion = () => {
    setSelectedAnswer(null);
    setShowExplanation(false);
    setCurrentQuestion((prev) => (prev + 1 < questions.length ? prev + 1 : 0));
  };

  return (
    <div className="max-w-lg mx-auto p-6">
      <Card>
        <CardContent className="p-6">
          <h2 className="text-xl font-bold">{questions[currentQuestion].question}</h2>
          <div className="mt-4">
            {questions[currentQuestion].options.map((option, index) => (
              <Button
                key={index}
                className={`w-full mb-2 ${selectedAnswer === index ? (index === questions[currentQuestion].answer ? "bg-green-500" : "bg-red-500") : ""}`}
                onClick={() => handleAnswer(index)}
                disabled={showExplanation}
              >
                {option}
              </Button>
            ))}
          </div>
          {showExplanation && (
            <div className="mt-4 p-4 bg-gray-100 rounded">
              <p>{selectedAnswer === questions[currentQuestion].answer ? "✅ Correct! " : "❌ Incorrect. "}{questions[currentQuestion].explanation}</p>
              <Button className="mt-4" onClick={nextQuestion}>Next Question</Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}