const ImageOverlay = ({
    isOpen = false,
    src = "",
    alt = "",
    close = () => {},
}) => {
    const [contentRef] = useOutsideClick(close);

    React.useEffect(() => {
        if(isOpen){
            document.body.classList.add('disable-scroll');
        } else {
            document.body.classList.remove('disable-scroll');
        }
    }, [isOpen]);

    if(!isOpen) return null;

    return(
        <div className="image-overlay">
            <div className="image-overlay--content" ref={contentRef}>
                <button
                    type="button"
                    className="image-overlay--close"
                    onClick={close}
                    aria-label={i18next.t("CERTIFICATES.CLOSE")}
                >
                    ×
                </button>
                <img className="image-overlay--image" src={src} alt={alt}/>
            </div>
        </div>
    );
}