import React from 'react';
import type { Question, Category, UserAnswer } from '../types';
import { AnswerOption } from './AnswerOption';
import styles from '../styles/quiz.module.css';

interface QuestionCardProps {
  question: Question;
  category: Category | undefined;
  currentAnswer: UserAnswer | undefined;
  onSelectAnswer: (answerIndex: number) => void;
  onBack: () => void;
  showBack: boolean;
}

const LETTERS = ['A', 'B', 'C', 'D', 'E', 'F'];

export const QuestionCard: React.FC<QuestionCardProps> = ({
  question,
  category,
  currentAnswer,
  onSelectAnswer,
  onBack,
  showBack,
}) => {
  return (
    <div className={styles.questionCard} key={question.id}>
      {category && (
        <span
          className={styles.questionCategory}
          style={{ color: category.color, background: `${category.color}18` }}
        >
          {category.name}
        </span>
      )}
      <h3 className={styles.questionText}>{question.text}</h3>
      <div className={styles.answersGrid}>
        {question.answers.map((answer, idx) => (
          <AnswerOption
            key={idx}
            letter={LETTERS[idx]}
            text={answer.text}
            selected={currentAnswer?.answerIndex === idx}
            onClick={() => onSelectAnswer(idx)}
          />
        ))}
      </div>
      {showBack && (
        <button className={styles.backButton} onClick={onBack} type="button">
          ← Back
        </button>
      )}
    </div>
  );
};