---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import ChipTitle from "./ChipTitle.astro";
const customers = await getCollection("customers");
const customersSorted = customers.sort((a, b) => a.data.id - b.data.id);
---

<div class="flex flex-wrap md:mt-10">
  <div class="flex-initial w-full">
    <div class="text-center flex justify-center w-full my-5">
      <ChipTitle text="Algunos de nuestros clientes" type="primary" />
    </div>
  </div>
  <div class="w-full overflow-hidden relative group">
    <div class="flex animate-slide gap-4">
      {
        Array.from({ length: 2 }).map(() =>
          customersSorted.map((customer) => (
            <div class="flex flex-shrink-0 aspect-[3.125/1] w-36 items-center justify-center mx-2">
              <Image
                src={customer.data.img}
                alt={customer.data.name}
                height={120}
                format="webp"
                loading="lazy"
                class="transform transition-transform duration-500 ease-in-out hover:scale-125 aspect-[3/2] object-contain"
              />
            </div>
          ))
        )
      }
    </div>
  </div>
</div>