callfi/components/ShareModal.tsx

// components/ShareModal.tsx
import { FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton } from 'next-share';
import React from 'react';
import { FaTimes } from 'react-icons/fa';

const ShareModal = ({ isOpen, onClose, shareLink }) => {
    if (!isOpen) return null;

    const handleCopyLink = () => {
        navigator.clipboard.writeText(shareLink);
        //alert('Link copied to clipboard!');
    };

    const shareIconSize =48;

    return (
        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
            <div className="glassmorphism p-5 rounded-lg max-w-md w-96 m-2">
                <div className="flex justify-end text-white">
                    <button onClick={onClose}>
                        <FaTimes />
                    </button>
                </div>
                <div className="mt-2 text-center">
                    <h2 className="text-lg font-bold text-white">Share Profile</h2>
                    <div className='flex grid grid-cols-4 ml-5 mt-7 mb-5'>
                        <FacebookShareButton url={shareLink}> 
                            <FacebookIcon size={shareIconSize} round />
                        </FacebookShareButton>
                        <TwitterShareButton url={shareLink} >
                            <TwitterIcon size={shareIconSize} round/>
                        </TwitterShareButton>    
                        <RedditShareButton url={shareLink} >
                            <RedditIcon size={shareIconSize} round/>
                        </RedditShareButton>    
                        <TelegramShareButton url={shareLink} >
                            <TelegramIcon size={shareIconSize} round/>
                        </TelegramShareButton>    
                    </div>
                    <input
                        type="text"
                        readOnly
                        value={shareLink}
                        className="w-full mt-2 p-2 border border-gray-300 rounded glassmorphism text-white"
                    />
                    <button
                        onClick={handleCopyLink}
                        className="mt-4 bg-blue-500 glassmorphism text-white py-2 px-4 rounded hover:bg-blue-700"
                    >
                        Copy Link
                    </button>

                    
                </div>
            </div>
        </div>
    );
};

export default ShareModal;