import React from 'react'

export function RecordButton({
  disabled,
  isRecording,
  onStart,
  onStop,
  text = 'Falar'
}) {
  const handleMouseDown = () => {
    if (!disabled) onStart?.()
  }

  const handleMouseUp = () => {
    if (isRecording) onStop?.()
  }

  const handleMouseLeave = () => {
    if (isRecording) onStop?.()
  }

  const handleTouchStart = (e) => {
    e.preventDefault()
    if (!disabled) onStart?.()
  }

  const handleTouchEnd = (e) => {
    e.preventDefault()
    if (isRecording) onStop?.()
  }

  const buttonText = disabled ? 'Conectando...' : (isRecording ? 'Soltar' : text)

  return (
    <button
      className={`record-btn ${isRecording ? 'recording' : ''}`}
      disabled={disabled}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseLeave}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
    >
      {buttonText}
    </button>
  )
}