portfolio/src/components/utility/OverlayPicture.tsx

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

interface OverlayPictureProps {
    src: string;
    alt: string;
    className?: string;
}

const OverlayPicture: React.FC<OverlayPictureProps> = ({ src, alt, className = '' }) => {
    const [isOpen, setIsOpen] = useState(false);

    useEffect(() => {
        const handleEscape = (event: KeyboardEvent) => {
            if (event.key === 'Escape' && isOpen) {
                // We don't want the escape key event to propagate to the overlay parent
                // If the picture overlay is used inside another overlay, this prevents both overlays from closing
                event.stopPropagation();
                setIsOpen(false);
            }
        };

        if (isOpen) {
            // Use capture phase
            document.addEventListener('keydown', handleEscape, true); 
            document.body.style.overflow = 'hidden';
        }

        return () => {
            document.removeEventListener('keydown', handleEscape, true);
            document.body.style.overflow = 'unset';
        };
    }, [isOpen]);

    return (
        <>
            <motion.div className={`${className} flex items-center justify-center`}>
                <motion.img
                    src={src}
                    alt={alt}
                    className={`cursor-zoom-in flex self-center max-w-xl max-h-96 rounded-lg shadow-md object-contain`}
                    onClick={() => setIsOpen(true)}
                    transition={{ duration: 0.2 }}
                    layoutId='overlay-image'
                />
            </motion.div>

            <AnimatePresence>
                {isOpen && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        transition={{ duration: 0.2 }}
                        className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 backdrop-blur-sm"
                        onClick={(e) => {
                            if (e.target === e.currentTarget) {
                                setIsOpen(false);
                            }
                        }}
                    >
                        <motion.img
                            src={src}
                            alt={alt}
                            className="max-w-[90%] max-h-[80%] object-contain rounded-md"
                            // We don't want the click on the image to close the overlay
                            layoutId='overlay-image'
                        />
                    </motion.div>
                )}
            </AnimatePresence>
        </>
    );
};

export default OverlayPicture;