import React, { useState } from 'react'
import styles from './ModalCopyInput.module.css'

interface Props {
  value: string
  buttonText?: string
  copiedText?: string
  onCopy?: (value: string) => void
  className?: string
}

/**
 * Componente de input con botón de copiar
 * Estilo StreamYard: input ancho + botón azul brillante
 */
export const ModalCopyInput: React.FC<Props> = ({ 
  value, 
  buttonText = 'Copiar',
  copiedText = '✓ Copiado',
  onCopy,
  className = ''
}) => {
  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(value)
      setCopied(true)
      onCopy?.(value)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error('Error al copiar:', err)
    }
  }

  return (
    <div className={`${styles.container} ${className}`}>
      <input 
        type="text" 
        value={value} 
        readOnly 
        className={styles.input}
      />
      <button 
        onClick={handleCopy} 
        className={styles.button}
      >
        {copied ? copiedText : buttonText}
      </button>
    </div>
  )
}

export default ModalCopyInput