import React, { useState, useEffect, useCallback, useRef } from 'react';
import Modal from './Modal';
import PremiumModalCall from './PremiumModal/PremiumModal';

const ProUpgradeModal = ({ isOpen, onClose, feature = 'This feature' }) => {

    const closePricingModal = () => {
        onClose();
    };

    const handleUpgrade = () => {
        // Trigger Freemius checkout if available
        if (window.FS && window.FS.checkout) {
            window.FS.checkout(true);
        } else {
            // Fallback to external link
            window.open('https://wpazleen.com/product-display/', '_blank');
        }
        onClose();
    };

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title="Upgrade to Pro"
            size="medium"
        >
            <div className="pro-upgrade-content">
                <PremiumModalCall
                    configId="productdisplay"
                    onClose={closePricingModal}
                />
            </div>
        </Modal>
    );
};

export default ProUpgradeModal;