<script setup>
import { computed } from "vue";
import { clientLogos as defaultLogos } from "~/data/home";

const props = defineProps({
  logos: {
    type: Array,
    default: () => defaultLogos,
  },
});

const marqueeTrackA = computed(() => [...props.logos, ...props.logos]);
const marqueeTrackB = computed(() => [...props.logos, ...props.logos]);
</script>

<template>
  <section class="overflow-hidden bg-[#fafafa] py-16" id="cases">
    <div class="container-gm" data-reveal>
      <p class="text-center text-sm uppercase tracking-[0.3em] text-[#8a8a8a]">
        我们的客户
      </p>
    </div>

    <div class="relative mt-8 overflow-hidden">
      <div class="flex w-max animate-marquee hover:[animation-play-state:paused]">
        <div
          v-for="(name, index) in marqueeTrackA"
          :key="`a-${name}-${index}`"
          class="mx-4 flex h-14 w-32 shrink-0 items-center justify-center rounded-2xl border border-gm-border bg-white text-sm font-medium text-[#6b6b6b] shadow-sm"
        >
          {{ name }}
        </div>
      </div>
    </div>

    <div class="relative mt-6 overflow-hidden">
      <div class="flex w-max animate-marquee-reverse hover:[animation-play-state:paused]">
        <div
          v-for="(name, index) in marqueeTrackB"
          :key="`b-${name}-${index}`"
          class="mx-4 flex h-14 w-32 shrink-0 items-center justify-center rounded-2xl border border-gm-border bg-white text-sm font-medium text-[#6b6b6b] shadow-sm"
        >
          {{ name }}
        </div>
      </div>
    </div>
  </section>
</template>
