import React, { useState } from ‘react’;

interface ShareModalProps {
isOpen: boolean;
onClose: () => void;
url: string;
title: string;
text: string;
}

type Tab = ‘link’ | ’embed’;

export const ShareModal: React.FC = ({ isOpen, onClose, url, title, text }) => {
const [activeTab, setActiveTab] = useState(‘link’);
const [copyLabel, setCopyLabel] = useState(“Copy Code”);

if (!isOpen) return null;

// Generate iframe code with responsive styling
const embedCode = ``;

const handleCopy = (contentToCopy: string) => {
// 1. Select the text visually so the user sees it’s selected
const inputId = activeTab === ‘link’ ? ‘share-url-input’ : ‘share-embed-input’;
const input = document.getElementById(inputId) as HTMLTextAreaElement | HTMLInputElement;

if (input) {
input.select();
input.setSelectionRange(0, 99999); // For mobile devices
}

// 2. Try the modern Clipboard API
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(contentToCopy)
.then(() => {
setCopyLabel(“Copied!”);
setTimeout(() => setCopyLabel(“Copy Code”), 3000);
})
.catch((err) => {
console.error(“Clipboard API failed”, err);
// Fallback handled below
fallbackCopy();
});
} else {
fallbackCopy();
}
};

const fallbackCopy = () => {
try {
const successful = document.execCommand(‘copy’);
if (successful) {
setCopyLabel(“Copied!”);
} else {
setCopyLabel(“Press Ctrl+C”);
}
} catch (err) {
setCopyLabel(“Press Ctrl+C”);
}
setTimeout(() => setCopyLabel(“Copy Code”), 3000);
};

const encodedText = encodeURIComponent(text);
const encodedUrl = encodeURIComponent(url);

return (

{title}

Choose how you want to share this experience.


{activeTab === ‘link’ ? (

(e.target as HTMLInputElement).select()}
/>

) : (

1. Copy this code