'use client';

interface AnswerOptionProps {
  label: string;
  text: string;
  state: 'default' | 'correct' | 'incorrect' | 'show-correct';
  onClick: () => void;
  disabled: boolean;
}

export default function AnswerOption({
  label,
  text,
  state,
  onClick,
  disabled,
}: AnswerOptionProps) {
  const getClasses = () => {
    const baseClasses = 'answer-option ';

    switch (state) {
      case 'correct':
        return baseClasses + 'answer-option-correct animate-pulse-green';
      case 'incorrect':
        return baseClasses + 'answer-option-incorrect animate-shake';
      case 'show-correct':
        return baseClasses + 'answer-option-correct';
      default:
        return baseClasses;
    }
  };

  const getIcon = () => {
    switch (state) {
      case 'correct':
        return (
          <span className="w-6 h-6 flex items-center justify-center bg-green-500 text-white rounded-full shrink-0">
            ✓
          </span>
        );
      case 'incorrect':
        return (
          <span className="w-6 h-6 flex items-center justify-center bg-red-500 text-white rounded-full shrink-0">
            ✗
          </span>
        );
      case 'show-correct':
        return (
          <span className="w-6 h-6 flex items-center justify-center bg-green-500 text-white rounded-full shrink-0">
            ✓
          </span>
        );
      default:
        return (
          <span className="w-6 h-6 flex items-center justify-center bg-gray-200 text-gray-600 rounded-full shrink-0 font-medium text-sm">
            {label}
          </span>
        );
    }
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled || state === 'correct' || state === 'incorrect' || state === 'show-correct'}
      className={getClasses()}
    >
      {getIcon()}
      <span className="flex-1 text-right">{text}</span>
    </button>
  );
}