<template>
    <section class="bg-white">
        <div class="container py-5">
            <div class="py-3">
                <h2 class="fw-bold text-center">Galería</h2>
            </div>

            <!-- GALLERY -->
            <div class="d-flex justify-content-center mb-5">
                <div class="gallery">
                    <div v-for="(image, index) in gallery_image" :key="index" class="gallery-item" :class="image.size"
                        @click="() => showImg(index)">
                        <img :src="image.src" :alt="image.alt" loading="lazy" />
                    </div>
                </div>
                <VueEasyLightbox :visible="visibleRef" :imgs="images" :index="indexRef" @hide="onHide" />
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
const visibleRef = ref(false);
const indexRef = ref(0);

const images = ref<string[]>([]);

const gallery_image = ref([
    { src: '/images/gallery/gallery1.webp', alt: 'cleaning', size: 'large' },
    { src: '/images/gallery/gallery2.webp', alt: '', size: 'medium' },
    { src: '/images/gallery/gallery3.webp', alt: '', size: 'large' },
    { src: '/images/gallery/gallery4.webp', alt: '', size: 'medium' },
    { src: '/images/gallery/gallery5.webp', alt: '', size: 'large' },
    { src: '/images/gallery/gallery6.webp', alt: '', size: 'large' },
])

onMounted(() => {
    gallery_image.value.forEach(image => {
        images.value.push(image.src);
    })
})

const showImg = (index: number) => {
    indexRef.value = index;
    visibleRef.value = true;
};
const onHide = () => (visibleRef.value = false);

</script>

<style scoped lang="scss">
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 150px;
    gap: 10px;
    padding: 0px 30px;
    width: 80%;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f0f0f0;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Imágenes más grandes */
.gallery-item.large {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery-item.medium {
    grid-column: span 1;
    grid-row: span 1;
}

@media (min-width: 992px) {

    /* Imágenes más grandes */
    .gallery-item.large {
        grid-column: span 1;
        grid-row: span 2;
    }

    .gallery-item.medium {
        grid-column: span 2;
        grid-row: span 2;
    }
}


/* Estilos opcionales */
.gallery-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}
</style>