import { useState } from 'react'
import { CheckCircle, XCircle } from 'lucide-react'

export default function QuizComponent({ data, onUpdate }) {
  const [selectedOption, setSelectedOption] = useState(null)
  const [isSubmitted, setIsSubmitted] = useState(false)

  const quizData = data || {
    question: "What did you learn from this section?",
    options: [
      "Key concept A",
      "Important detail B", 
      "Main takeaway C",
      "All of the above"
    ],
    correctAnswer: 3
  }

  const handleSubmit = () => {
    setIsSubmitted(true)
  }

  const isCorrect = selectedOption === quizData.correctAnswer

  return (
    <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 my-6">
      <h3 className="text-lg font-semibold text-blue-900 mb-4">Quick Quiz</h3>
      <p className="text-blue-800 mb-4">{quizData.question}</p>
      
      <div className="space-y-3 mb-6">
        {quizData.options.map((option, index) => (
          <label key={index} className="flex items-center space-x-3 cursor-pointer">
          <input
            type="radio"
            name="quiz"
            value={index}
            checked={selectedOption === index}
            onChange={(e) => setSelectedOption(parseInt(e.target.value))}
            className="text-blue-600 focus:ring-blue-500"
            disabled={isSubmitted}
          />
          <span className={`text-blue-700 ${isSubmitted && index === quizData.correctAnswer ? 'font-semibold' : ''}`}>
            {option}
          </span>
          {isSubmitted && index === quizData.correctAnswer && (
            <CheckCircle className="h-5 w-5 text-green-500" />
          )}
          {isSubmitted && selectedOption === index && !isCorrect && (
            <XCircle className="h-5 w-5 text-red-500" />
          )}
        </label>
      </div>

      {!isSubmitted ? (
        <button
          onClick={handleSubmit}
          disabled={selectedOption === null}
          className="bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
        >
          Submit Answer
        </button>
      ) : (
        <div className={`p-3 rounded-lg ${
          isCorrect ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
        }`}>
          {isCorrect ? (
            <div className="flex items-center space-x-2">
              <CheckCircle className="h-5 w-5" />
              <span>Correct! Well done.</span>
            </div>
          ) : (
            <div className="flex items-center space-x-2">
              <XCircle className="h-5 w-5" />
              <span>Not quite right. Try again!</span>
            </div>
          )}
        </div>
      )}
    </div>
  )
}