import { ReactElement, ReactNode, useRef, useState } from "react";

interface ModalOverlayProps {
    visible: boolean;
    setVisible: (b: boolean) => void;
    children: ReactElement | ReactElement[];
}

export function ModalOverlay({visible, setVisible, children}: ModalOverlayProps) {
    const modalRef = useRef<HTMLDivElement>(null);

    return visible && <div className="settings-modal" ref={modalRef}>
        <div className="modal-content">
            {children}
            <button className="close-modal" onClick={() => setVisible(false)}>Close</button>
        </div>
    </div>
}