<script setup lang="ts">

// types

type Props = {
    // brands: string[];
}

// props

const props = defineProps<Props>();
const {} = toRefs(props);

// state

const { $gsap: gsap } = useNuxtApp();

// lifecycle

onMounted(() => {
    gsap.to("#marquee-text-container", {
        xPercent: -50, // Adjust based on content width
        duration: 10,  // Adjust for desired speed
        ease: "none",
        repeat: -1
    });
});

</script>

<template>
    <div class="relative w-full flex flex-col justify-center h-[350px]">

        <div class="-rotate-z-2 z-20">
            <div
                class="bg-warning-500 flex pr-20 gap-20 py-2 w-max animate-marquee-reverse"
            >
            <span
                v-for="i in 10"
                class="text-[50px] text-white whitespace-nowrap font-semibold"
            >
                TEST {{ i }}
            </span>
                <span
                    v-for="i in 10"
                    class="text-[50px] text-white whitespace-nowrap font-semibold"
                >
                TEST {{ i }}
            </span>
            </div>
        </div>

        <div class="rotate-z-2 z-10">
            <div
                class="bg-slate-50 flex pr-20 gap-20 py-2 w-max animate-marquee"
            >
                <span
                    v-for="i in 10"
                    class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
                >
                    TEST {{ i }}
                </span>
                    <span
                        v-for="i in 10"
                        class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
                    >
                    TEST {{ i }}
                </span>
            </div>
        </div>

    </div>
</template>