import React from 'react'
import { SiGmail } from 'react-icons/si'
import { MdEmail } from 'react-icons/md'
import { FaFacebookMessenger } from 'react-icons/fa'
import styles from './ModalShareButtons.module.css'

interface ShareButton {
  icon: React.ReactNode
  label: string
  onClick: () => void
}

interface Props {
  onGmail?: () => void
  onEmail?: () => void
  onMessenger?: () => void
  customButtons?: ShareButton[]
  className?: string
}

/**
 * Componente de botones de compartir para modales
 * Estilo StreamYard: icono + texto, fondo gris claro, hover azul
 */
export const ModalShareButtons: React.FC<Props> = ({ 
  onGmail,
  onEmail,
  onMessenger,
  customButtons,
  className = ''
}) => {
  const defaultButtons: ShareButton[] = [
    ...(onGmail ? [{
      icon: <SiGmail size={18} />,
      label: 'Gmail',
      onClick: onGmail
    }] : []),
    ...(onEmail ? [{
      icon: <MdEmail size={18} />,
      label: 'Correo electrónico',
      onClick: onEmail
    }] : []),
    ...(onMessenger ? [{
      icon: <FaFacebookMessenger size={18} />,
      label: 'Messenger',
      onClick: onMessenger
    }] : [])
  ]

  const buttons = customButtons || defaultButtons

  if (buttons.length === 0) return null

  return (
    <div className={`${styles.container} ${className}`}>
      {buttons.map((button, index) => (
        <button 
          key={index}
          onClick={button.onClick}
          className={styles.button}
          type="button"
        >
          <span className={styles.icon}>{button.icon}</span>
          <span className={styles.label}>{button.label}</span>
        </button>
      ))}
    </div>
  )
}

export default ModalShareButtons