---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
const ludicActivities = await getCollection("ludicGallery");
---

<div class="flex flex-wrap mt-10">
  <div class="w-full overflow-hidden relative group py-8">
    <!-- Gradientes izquierda y derecha -->
    <div
      class="absolute left-0 top-0 w-28 h-full bg-gradient-to-r from-gray-50 to-transparent z-10 pointer-events-none"
    >
    </div>
    <div
      class="absolute right-0 top-0 w-28 h-full bg-gradient-to-l from-gray-50 to-transparent z-10 pointer-events-none"
    >
    </div>

    <!-- Carrusel de imágenes -->
    <div
      class="flex animate-ludicSlideMobile md:animate-ludicSlideDesktop gap-4 max-h-[20rem]"
    >
      {
        Array.from({ length: 2 }).map(() =>
          ludicActivities.map((customer) => (
            <div class="flex-shrink-0 w-1/2 sm:w-1/3 lg:w-1/4 aspect-[3/2] rounded-3xl shadow-xl overflow-hidden">
              <div class="w-full h-full">
                <Image
                  src={customer.data.img}
                  alt={customer.data.title}
                  height={450}
                  width={400}
                  format="webp"
                  loading="lazy"
                  class="w-full h-full object-cover transition-transform duration-500 ease-in-out hover:scale-105"
                />
              </div>
            </div>
          ))
        )
      }
    </div>
  </div>
</div>