import React, { memo } from 'react'
import AudioPlayer from '@/components/AudioPlayer'

interface TestResultDisplayProps {
  isCorrect: boolean
  correctAnswer: string
  userAnswer?: string
  word: string
  pronunciation?: string
  example: string
  exampleTranslation: string
  showResult: boolean
}

export const TestResultDisplay = memo<TestResultDisplayProps>(({
  isCorrect,
  correctAnswer,
  userAnswer,
  word,
  pronunciation,
  example,
  exampleTranslation,
  showResult
}) => {
  if (!showResult) return null

  return (
    <div className={`mt-6 p-6 rounded-lg w-full ${
      isCorrect
        ? 'bg-green-50 border border-green-200'
        : 'bg-red-50 border border-red-200'
    }`}>
      <p className={`font-semibold text-left text-xl mb-4 ${
        isCorrect ? 'text-green-700' : 'text-red-700'
      }`}>
        {isCorrect ? '正確！' : '錯誤！'}
      </p>

      {!isCorrect && userAnswer && (
        <div className="mb-4">
          <p className="text-gray-700 text-left">
            正確答案是：<strong className="text-lg">{correctAnswer}</strong>
          </p>
        </div>
      )}

      <div className="space-y-3">
        <div className="text-left">
          <p className="text-gray-600">
            {word && <span className="font-semibold text-left text-xl">{word}</span>}
            {pronunciation && <span className="mx-2">{pronunciation}</span>}
            <AudioPlayer text={correctAnswer} />
          </p>
        </div>

        <div className="text-left">
          <p className="text-gray-600">
            {example}
            <AudioPlayer text={example} />
          </p>
          <p className="text-gray-500 text-sm">
            {exampleTranslation}
          </p>
        </div>
      </div>
    </div>
  )
})

TestResultDisplay.displayName = 'TestResultDisplay'