import React from "react";

interface Option {
  id?: string | number;
  value: string;
  questionId?: number;
  key?: string;
}

interface Question {
  id: number;
  title?: string;
  questionText?: string;
  description?: string;
  options: Record<string, string> | Option[];
  answer?: string;
}

interface Props {
  question: Question;
  questionNo: number;
  onAnswerChange: (questionId: number, optionId: string | number) => void;
  selectedAnswer?: number | string | null;
}

const PsychometricQuestion = ({
  question,
  questionNo,
  onAnswerChange,
  selectedAnswer,
}: Props) => {
  const handleOptionChange = (optionId: string | number) => {
    onAnswerChange(question.id, optionId);
  };

  // Convert options object to array if needed
  const optionsArray = Array.isArray(question.options)
    ? question.options
    : Object.entries(question.options).map(([key, value]) => ({
        key,
        value,
        id: key,
      }));

  const questionText = question.title || question.questionText || "";

  return (
    <div className="psychometric_question">
      <h5 className="pb-3">
        Q{questionNo}. {questionText}
      </h5>
      <div className="psychometric_question_wrapper">
        <form>
          {optionsArray.map((option: any, index: number) => {
            const optionId = option.id || option.key || index;
            return (
              <label key={`${question.id}-${optionId}`}>
                <input
                  type="radio"
                  name={`question-${question.id}`}
                  value={String(optionId)}
                  checked={
                    selectedAnswer !== undefined &&
                    selectedAnswer !== null &&
                    String(selectedAnswer) === String(optionId)
                  }
                  onChange={() => handleOptionChange(optionId)}
                />
                <span>{option.value}</span>
              </label>
            );
          })}
        </form>
      </div>
    </div>
  );
};

export default PsychometricQuestion;