import React from 'react';
import { useRouter } from 'next/router';

const SocialShare = ({ 
  title, 
  description, 
  url,
  className = "social-share-container" 
}) => {
  const router = useRouter();
  const baseUrl = 'https://suite.sempreg.com';
  const shareUrl = url || `${baseUrl}${router.asPath}`;
  const shareTitle = encodeURIComponent(title || 'Suite Sempreg');
  const shareDescription = encodeURIComponent(description || 'Optimiza tu contabilidad con nuestras herramientas especializadas');

  const shareLinks = {
    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`,
    twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${shareTitle}`,
    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`,
    whatsapp: `https://wa.me/?text=${shareTitle}%20${encodeURIComponent(shareUrl)}`,
    telegram: `https://t.me/share/url?url=${encodeURIComponent(shareUrl)}&text=${shareTitle}`,
    email: `mailto:?subject=${shareTitle}&body=${shareDescription}%0A%0A${encodeURIComponent(shareUrl)}`
  };

  const handleShare = (platform) => {
    if (navigator.share && platform === 'native') {
      navigator.share({
        title: title,
        text: description,
        url: shareUrl,
      }).catch(console.error);
    } else {
      window.open(shareLinks[platform], '_blank', 'width=600,height=400');
    }
  };

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      // Aquí podrías mostrar una notificación de éxito
      alert('¡Enlace copiado al portapapeles!');
    } catch (err) {
      console.error('Error al copiar:', err);
    }
  };

  return (
    <div className={className}>
      <div className="share-buttons">
        <button 
          onClick={() => handleShare('facebook')}
          className="share-btn facebook"
          aria-label="Compartir en Facebook"
        >
          <i className="bi bi-facebook"></i>
        </button>
        
        <button 
          onClick={() => handleShare('twitter')}
          className="share-btn twitter"
          aria-label="Compartir en Twitter"
        >
          <i className="bi bi-twitter"></i>
        </button>
        
        <button 
          onClick={() => handleShare('linkedin')}
          className="share-btn linkedin"
          aria-label="Compartir en LinkedIn"
        >
          <i className="bi bi-linkedin"></i>
        </button>
        
        <button 
          onClick={() => handleShare('whatsapp')}
          className="share-btn whatsapp"
          aria-label="Compartir en WhatsApp"
        >
          <i className="bi bi-whatsapp"></i>
        </button>
        
        <button 
          onClick={() => handleShare('telegram')}
          className="share-btn telegram"
          aria-label="Compartir en Telegram"
        >
          <i className="bi bi-telegram"></i>
        </button>
        
        <button 
          onClick={() => handleShare('email')}
          className="share-btn email"
          aria-label="Compartir por email"
        >
          <i className="bi bi-envelope"></i>
        </button>
        
        <button 
          onClick={copyToClipboard}
          className="share-btn copy"
          aria-label="Copiar enlace"
        >
          <i className="bi bi-link-45deg"></i>
        </button>
        
        {/* Botón nativo de compartir (solo en dispositivos compatibles) */}
        {navigator.share && (
          <button 
            onClick={() => handleShare('native')}
            className="share-btn native"
            aria-label="Compartir"
          >
            <i className="bi bi-share"></i>
          </button>
        )}
      </div>

      <style jsx>{`
        .social-share-container {
          margin: 20px 0;
        }
        
        .share-buttons {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          justify-content: center;
        }
        
        .share-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border: none;
          border-radius: 50%;
          color: white;
          font-size: 18px;
          cursor: pointer;
          transition: all 0.3s ease;
          text-decoration: none;
        }
        
        .share-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .facebook { background-color: #1877f2; }
        .twitter { background-color: #1da1f2; }
        .linkedin { background-color: #0077b5; }
        .whatsapp { background-color: #25d366; }
        .telegram { background-color: #0088cc; }
        .email { background-color: #ea4335; }
        .copy { background-color: #6c757d; }
        .native { background-color: #007bff; }
        
        @media (max-width: 768px) {
          .share-btn {
            width: 35px;
            height: 35px;
            font-size: 16px;
          }
        }
      `}</style>
    </div>
  );
};

export default SocialShare;