import React from 'react'

interface TTSButtonProps {
  text: string
  lang?: string
  isPlaying: boolean
  onToggle: (text: string, lang?: string) => void
  className?: string
  size?: 'sm' | 'md' | 'lg'
}

export const TTSButton: React.FC<TTSButtonProps> = ({
  text,
  lang = 'en-US',
  isPlaying,
  onToggle,
  className = '',
  size = 'md'
}) => {
  const sizeClasses = {
    sm: 'w-6 h-6 text-xs',
    md: 'w-8 h-8 text-sm',
    lg: 'w-10 h-10 text-base'
  }

  const baseClasses = `
    ${sizeClasses[size]}
    rounded-full
    border-2
    transition-all
    duration-200
    flex
    items-center
    justify-center
    cursor-pointer
    hover:scale-110
    active:scale-95
  `

  const stateClasses = isPlaying
    ? 'bg-blue-500 border-blue-500 text-white animate-pulse'
    : 'bg-gray-100 border-gray-300 text-gray-600 hover:bg-blue-50 hover:border-blue-400 hover:text-blue-600'

  const handleClick = () => {
    onToggle(text, lang)
  }

  return (
    <button
      onClick={handleClick}
      className={`${baseClasses} ${stateClasses} ${className}`}
      title={isPlaying ? '停止播放' : '播放發音'}
      disabled={!text}
    >
      {isPlaying ? (
        <span>⏸</span>
      ) : (
        <span>🔊</span>
      )}
    </button>
  )
}