const backdrop = document.querySelector("#image-backdrop");
const preview = document.querySelector("#image-preview");

if (backdrop instanceof HTMLElement && preview instanceof HTMLImageElement) {
    document.addEventListener("click", (event) => {
        if (!(event.target instanceof Element)) return;

        if (!backdrop.hidden && backdrop.contains(event.target)) {
            backdrop.hidden = true;
            document.body.style.overflow = "";
            return;
        }

        const image = event.target.closest("article img");

        if (!(image instanceof HTMLImageElement)) return;

        preview.src = image.currentSrc || image.src;
        preview.alt = image.alt;
        backdrop.hidden = false;
        document.body.style.overflow = "hidden";
    });
}