export default function ImageGallery() {
    const [images, setImages] = useState<ImageType[]>([]);
    const breakpointColumnsObj = {
        default: 3,
        1100: 2,
        700: 1,
    };

    useEffect(() => {
        const fetchImages = async () => {
            const image: ImageType[] = await getGallery();
            setImages(image);
        };

        fetchImages();
    }, []);

    return (
        <div>
        <Masonry
        breakpointCols={breakpointColumnsObj}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column">
            {images && images.map((img) => (
                <div key={img._id}>
                    <ImageModal imgLink={img.image.image} imgAlt={img.image.alt}/>
                </div>
            ))}
        </Masonry>
        </div>
    )
}

            <div
                role="button"
                tabIndex={0}
                onClick={() => setShowModal(true)}
                aria-label="Kattintson a képre a nagyításhoz"
                className="hover01"
            >
                <div>
                    <Image className='h-auto max-w-full rounded-lg' src={imgLink} alt={imgAlt} width={800} height={800} onLoad={onLoad} priority/> 
                </div>
            </div>
            {showModal && (
                <div className="modal" onClick={closeModal}>
                    <span className="close" onClick={closeModal}>
                        &times;
                    </span>
                    <div className="modal-content">
                        <Image src={imgLink} alt="Modal Image" layout="fill" objectFit="contain"/>
                    </div>
                </div>