const { useEffect, useState } = React;

const MCQQuestion = ({ question, onAnswer }) => {
  const [selected, setSelected] = useState(null);

  useEffect(() => {
    setSelected(null);
  }, [question.id]);

  const handlePick = (option) => {
    if (selected !== null) return;
    setSelected(option);
    onAnswer(option === question.answer);
  };

  return (
    <div>
      <h3>{question.prompt}</h3>
      <div className="option-list">
        {question.options.map((option) => (
          <button
            key={option}
            className={`option ${
              selected === option ? "selected" : ""
            } ${
              selected !== null && option === question.answer ? "correct" : ""
            } ${
              selected === option && option !== question.answer ? "wrong" : ""
            }`}
            onClick={() => handlePick(option)}
            disabled={selected !== null}
          >
            {option}
          </button>
        ))}
      </div>
    </div>
  );
};