import React from 'react';
import styles from '../styles/quiz.module.css';

interface AnswerOptionProps {
  letter: string;
  text: string;
  selected: boolean;
  onClick: () => void;
}

export const AnswerOption: React.FC<AnswerOptionProps> = ({
  letter,
  text,
  selected,
  onClick,
}) => {
  return (
    <button
      className={`${styles.answerOption} ${selected ? styles.selected : ''}`}
      onClick={onClick}
      type="button"
    >
      <span className={styles.answerLetter}>{letter}</span>
      <span className={styles.answerText}>{text}</span>
    </button>
  );
};