import { useState } from 'react';

function RadioGroup({ options, value, onChange }) {
  return (
    <div className="radio-group">
      {options.map((opt) => (
        <label
          key={opt}
          className={`radio-option${value === opt ? ' selected' : ''}`}
          onClick={() => onChange(opt)}
        >
          <div className="radio-circle">
            <div className="radio-dot" />
          </div>
          <span className="radio-label">{opt}</span>
        </label>
      ))}
    </div>
  );
}

export default function QuestionCard({ question, index, total, onAnswer, answer }) {
  const isText = !question.options;

  return (
    <div className="q-card" style={{ animationDelay: `${index * 0.06}s` }}>
      <div className="q-index">Question {index + 1} of {total}</div>
      <div className="q-text">{question.question}</div>

      {isText ? (
        <textarea
          className="text-answer"
          placeholder="Type your answer here…"
          value={answer || ''}
          onChange={(e) => onAnswer(e.target.value)}
          rows={3}
          id={`q-text-${index}`}
        />
      ) : (
        <RadioGroup
          options={question.options}
          value={answer || ''}
          onChange={onAnswer}
        />
      )}
    </div>
  );
}