import React from 'react';

export default function QuizModal({ content, onClose }) {
    // Close on escape key
    React.useEffect(() => {
        const handleEscape = (e) => {
            if (e.key === 'Escape') {
                onClose();
            }
        };

        window.addEventListener('keydown', handleEscape);
        return () => window.removeEventListener('keydown', handleEscape);
    }, [onClose]);

    const handleBackdropClick = (e) => {
        if (e.target === e.currentTarget) {
            onClose();
        }
    };

    return (
        <div className="quiz-modal-overlay" onClick={handleBackdropClick}>
            <div className="quiz-modal-container">
                <div className="quiz-modal-header">
                    <h2>Quiz Content</h2>
                    <button
                        className="quiz-modal-close"
                        onClick={onClose}
                        aria-label="Close modal"
                    >
                        ×
                    </button>
                </div>

                <div className="quiz-modal-body">
                    <div className="quiz-content-preview">
                        <h3>Quiz ID: {content.id}</h3>
                        <div className="quiz-text-content">
                            <strong>Content from section:</strong>
                            <p>{content.textContent}</p>
                        </div>
                    </div>

                    <div className="quiz-placeholder">
                        <p>Quiz component will be rendered here</p>
                        <p>This content will be passed to Quiz component for processing</p>
                    </div>
                </div>

                <div className="quiz-modal-footer">
                    <button className="quiz-modal-btn-close" onClick={onClose}>
                        Close
                    </button>
                </div>
            </div>
        </div>
    );
}