"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;
}

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

const QuestionItem: React.FC<QuestionItemProps> = ({
  question,
  index,
  selectedAnswer,
  onSelect,
}) => {
  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>

      <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 =
            question.type === "Single"
              ? selectedAnswer === optIdx
              : Array.isArray(selectedAnswer) &&
                selectedAnswer.includes(optIdx);

          return (
            <div key={optIdx} className="flex items-center gap-3">
              <button
                onClick={() => {
                  if (question.type === "Single") {
                    onSelect(optIdx);
                  } else {
                    let newAnswers = Array.isArray(selectedAnswer)
                      ? [...selectedAnswer]
                      : [];
                    if (newAnswers.includes(optIdx)) {
                      newAnswers = newAnswers.filter((a) => a !== optIdx);
                    } else {
                      newAnswers.push(optIdx);
                    }
                    onSelect(newAnswers);
                  }
                }}
                className={`w-7 h-7 rounded-full border font-bold
                  flex items-center justify-center
                  ${
                    isSelected
                      ? "bg-blue-600 text-white border-blue-600"
                      : "bg-gray-100 text-gray-900 border-gray-400"
                  }
                  hover:bg-blue-500 hover:text-white transition-colors`}
              >
                {letters[optIdx]}
              </button>
              <span className="text-gray-900">{opt}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default QuestionItem;