examjam-frontend/components/QuestionItem.tsx

"use client";

import React from "react";
import { Question, Answer } from "@/types/exam";
import { Bookmark } from "lucide-react";

interface QuestionItemProps {
  question: Question;
  index: number;
  selectedAnswer: Answer;
  onSelect: (answer: Answer) => void;
  userAnswer?: Answer;
  correctAnswer?: Answer;
  showResults?: boolean;
}

const letters = ["A", "B", "C", "D"]; // extend if needed

const QuestionItem: React.FC<QuestionItemProps> = ({
  question,
  index,
  selectedAnswer,
  onSelect,
  userAnswer,
  correctAnswer,
  showResults = false,
}) => {
  return (
    <div className="border border-blue-100 p-6 bg-slate-100 rounded-3xl mb-6">
      <p className="text-lg font-semibold mb-3">
        {index + 1}. {question.question}
      </p>

      {!showResults && (
        <div className="w-full flex justify-between">
          <div></div>
          <Bookmark size={24} />
        </div>
      )}

      <div className="flex flex-col gap-3">
        {question.options.map((opt, optIdx) => {
          const isSelected = selectedAnswer === optIdx;

          // ✅ logic for coloring
          let btnClasses = "bg-gray-100 text-gray-900 border-gray-400";
          if (isSelected) {
            btnClasses = "bg-blue-600 text-white border-blue-600";
          }

          if (showResults && correctAnswer !== undefined) {
            if (userAnswer === optIdx && userAnswer !== correctAnswer) {
              btnClasses = "bg-red-500 text-white border-red-600"; // wrong
            }
            if (correctAnswer === optIdx) {
              btnClasses = "bg-green-500 text-white border-green-600"; // correct
            }
          }

          return (
            <div key={optIdx} className="flex items-center gap-3">
              <button
                onClick={() => {
                  if (showResults) return; // disable selection in results mode
                  onSelect(optIdx); // always a number
                }}
                className={`w-7 h-7 rounded-full border font-bold
                  flex items-center justify-center
                  ${btnClasses}
                  transition-colors`}
              >
                {letters[optIdx]}
              </button>
              <span className="text-gray-900">{opt}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default QuestionItem;