import React from 'react'

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

export const BluePlayButton: React.FC<BluePlayButtonProps> = ({
  text,
  lang = 'en-US',
  isPlaying,
  onToggle,
  disabled = false,
  className = '',
  size = 'md',
  title
}) => {
  const sizeClasses = {
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-12 h-12'
  }

  const iconSizes = {
    sm: 'w-4 h-4',
    md: 'w-5 h-5',
    lg: 'w-6 h-6'
  }

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

  return (
    <button
      onClick={handleClick}
      disabled={disabled}
      title={title || (isPlaying ? "點擊停止播放" : "點擊播放發音")}
      className={`group relative ${sizeClasses[size]} rounded-full shadow-lg transform transition-all duration-200
        ${isPlaying
          ? 'bg-gradient-to-br from-green-500 to-green-600 shadow-green-200 scale-105'
          : 'bg-gradient-to-br from-blue-500 to-blue-600 hover:shadow-xl hover:scale-105 shadow-blue-200'
        } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${className}
      `}
    >
      {/* 播放中波紋效果 */}
      {isPlaying && (
        <div className="absolute inset-0 bg-blue-400 rounded-full animate-ping opacity-40"></div>
      )}

      {/* 按鈕圖標 */}
      <div className="relative z-10 flex items-center justify-center w-full h-full">
        {isPlaying ? (
          <svg className={`${iconSizes[size]} text-white`} fill="currentColor" viewBox="0 0 24 24">
            <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
          </svg>
        ) : (
          <svg className={`${iconSizes[size]} text-white group-hover:scale-110 transition-transform`} fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        )}
      </div>

      {/* 懸停提示光環 */}
      {!isPlaying && !disabled && (
        <div className="absolute inset-0 rounded-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
      )}
    </button>
  )
}