import AudioPlayer from '@/components/AudioPlayer'

interface AudioSectionProps {
  word: string
  pronunciation?: string
  className?: string
  showPronunciation?: boolean
}

export const AudioSection: React.FC<AudioSectionProps> = ({
  word,
  pronunciation,
  className = '',
  showPronunciation = true
}) => {
  return (
    <div className={`flex items-center justify-center gap-4 ${className}`}>
      {/* 音頻播放器 */}
      <AudioPlayer text={word} />

      {/* 發音符號 */}
      {showPronunciation && pronunciation && (
        <span className="text-gray-600 font-mono text-sm">
          {pronunciation}
        </span>
      )}
    </div>
  )
}