export function createPopup({ title, body, footer = '', customClass = '' }) {
    // Popup-Container erstellen
    const popup = document.createElement('div');
    popup.classList.add('popup');

    // Popup-Inhalt einfügen
    popup.innerHTML = `
        <div class="popup-content ${customClass}">
            <button class="close-popup">&times;</button>
            <div class="popup-header">
                <h2>${title}</h2>
            </div>
            <div class="popup-body">
                ${body}
            </div>
            ${footer ? `<div class="popup-footer">${footer}</div>` : ''}
        </div>
    `;

    // Popup dem Body hinzufügen
    document.body.appendChild(popup);

    // Scrollen deaktivieren
    document.documentElement.classList.add('html-no-scroll');

    // Event-Listener für Schließen-Button
    const closeButton = popup.querySelector('.close-popup');
    closeButton.addEventListener('click', () => closePopup(popup));

    // Event-Listener für ESC-Taste
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') closePopup(popup);
    });

    // Event-Listener für Klick außerhalb des Popups
    popup.addEventListener('click', (event) => {
        if (event.target === popup) closePopup(popup);
    });

    return popup;
}

export function closePopup(popup) {
    // Popup entfernen
    popup.remove();

    // Scrollen wieder aktivieren
    document.documentElement.classList.remove('html-no-scroll');
}

export function destroyAllPopups() {
    // Alle Popups entfernen
    document.querySelectorAll('.popup').forEach(popup => popup.remove());

    // Scrollen wieder aktivieren
    document.documentElement.classList.remove('html-no-scroll');
}
