import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { X, Link, Check } from 'lucide-react'; import { Song } from '../types'; import { useI18n } from '../context/I18nContext'; interface ShareModalProps { isOpen: boolean; onClose: () => void; song: Song; } const XIcon = () => ( ); const RedditIcon = () => ( ); const FacebookIcon = () => ( ); const WhatsAppIcon = () => ( ); const TelegramIcon = () => ( ); const LinkedInIcon = () => ( ); const EmailIcon = () => ( ); export const ShareModal: React.FC = ({ isOpen, onClose, song }) => { const { t } = useI18n(); const [copied, setCopied] = useState(false); if (!isOpen) return null; const shareUrl = `${window.location.origin}/song/${song.id}`; // Platform-specific share text for better engagement const defaultShareText = `🎵 "${song.title}" ${song.style ? `(${song.style})` : ''} - Made with ACE-Step UI`; const twitterText = `🔥 Just created "${song.title}" with ACE-Step UI - local AI music generation! ${song.style ? `#${song.style.replace(/\s+/g, '')}` : ''} #AIMusic #ACEStep`; const redditTitle = `[AI Music] ${song.title} - ${song.style || 'Original'} | Created with ACE-Step UI`; const whatsAppText = `🎧 Listen to this AI-generated song!\n\n"${song.title}" by ${song.creator || 'Unknown Artist'}\n${song.style ? `Genre: ${song.style}` : ''}\n\nMade with ACE-Step UI - free and open source!`; const telegramText = `🎵 "${song.title}" by ${song.creator || 'Unknown Artist'}\n${song.style ? `🎸 ${song.style}` : ''}\n\n🤖 Made with ACE-Step UI`; const linkedInText = `Check out this AI-generated music: "${song.title}" - Created locally with ACE-Step. #AIMusic #MusicTech #OpenSource`; const handleShareX = () => { const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(twitterText)}&url=${encodeURIComponent(shareUrl)}`; window.open(url, '_blank', 'width=550,height=420'); }; const handleShareReddit = () => { const url = `https://reddit.com/submit?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(redditTitle)}`; window.open(url, '_blank', 'width=800,height=600'); }; const handleShareFacebook = () => { const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}"e=${encodeURIComponent(defaultShareText)}`; window.open(url, '_blank', 'width=550,height=420'); }; const handleShareWhatsApp = () => { const url = `https://wa.me/?text=${encodeURIComponent(`${whatsAppText}\n\n${shareUrl}`)}`; window.open(url, '_blank'); }; const handleShareTelegram = () => { const url = `https://t.me/share/url?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(telegramText)}`; window.open(url, '_blank'); }; const handleShareLinkedIn = () => { const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`; window.open(url, '_blank', 'width=550,height=420'); }; const handleShareEmail = () => { const subject = encodeURIComponent(`🎵 ${t('emailSubject')}: ${song.title}`); const bodyText = t('emailBody') .replace('{title}', song.title) .replace('{creator}', song.creator || t('unknown')) .replace('{style}', song.style ? `${t('genres')}: ${song.style}` : '') .replace('{url}', shareUrl); const body = encodeURIComponent(bodyText); window.location.href = `mailto:?subject=${subject}&body=${body}`; }; const handleCopyLink = async () => { try { await navigator.clipboard.writeText(shareUrl); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch { const textArea = document.createElement('textarea'); textArea.value = shareUrl; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); setCopied(true); setTimeout(() => setCopied(false), 2000); } }; const modalContent = (

e.target === e.currentTarget && onClose()} >

{t('shareSong')}

{song.title}

{song.style}

); return ReactDOM.createPortal(modalContent, document.body); };