import { ReviewCardData } from '@/types/review'
import { SynonymsDisplay } from './SynonymsDisplay'
import { DifficultyBadge } from './DifficultyBadge'

interface CardHeaderProps {
  cardData: ReviewCardData
  showTranslation?: boolean
  className?: string
}

export const CardHeader: React.FC<CardHeaderProps> = ({
  cardData,
  showTranslation = true,
  className = ''
}) => {
  return (
    <div className={`text-center space-y-4 ${className}`}>
      {/* 單字標題 */}
      <div className="space-y-2">
        <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
          {cardData.word}
        </h2>

        {/* 發音 */}
        {cardData.pronunciation && (
          <p className="text-lg text-gray-600 font-mono">
            {cardData.pronunciation}
          </p>
        )}

        {/* 翻譯 */}
        {showTranslation && (
          <p className="text-xl text-blue-600 font-medium">
            {cardData.translation}
          </p>
        )}
      </div>

      {/* 難度等級和同義詞 */}
      <div className="flex items-center justify-center gap-4 flex-wrap">
        <DifficultyBadge level={cardData.difficultyLevel} />
        <SynonymsDisplay synonyms={cardData.synonyms} />
      </div>

      {/* 定義 */}
      <div className="max-w-2xl mx-auto">
        <p className="text-gray-700 leading-relaxed">
          {cardData.definition}
        </p>
      </div>
    </div>
  )
}