---
interface ClientItem {
  name: string;
  logo: string;
}

interface Props {
  items: ClientItem[];
}

const { items } = Astro.props;
---

<section class="py-16 bg-surface-container-lowest overflow-hidden border-y border-white/5">
  <div class="flex w-max animate-marquee">
    <div class="flex shrink-0 items-center gap-24 px-12">
      {items.map((item) => (
        <img
          src={item.logo}
          alt={item.name}
          class="h-12 w-auto object-contain"
        />
      ))}
    </div>
    <div class="flex shrink-0 items-center gap-24 px-12">
      {items.map((item) => (
        <img
          src={item.logo}
          alt={item.name}
          class="h-12 w-auto object-contain"
        />
      ))}
    </div>
  </div>
</section>