<script setup lang="ts">
import { useImage } from "@vueuse/core";
import { useRatio } from "~/composables/global/useRatio";

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

// props

const { isMobile } = useRatio();

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

const brandsList = ref([
    "acer.png",
    "adidas.png",
    "aeg.png",
    "anker.png",
    "apple.webp",
    "asus.png",
    "canon.png",
    "cat.png",
    "deawoo.png",
    "dell.png",
    "greenlion.webp",
    "gucci.png",
    "hp.png",
    "huawei.webp",
    "jbl.png",
    "jordan.png",
    "lg.png",
    "microsoft.png",
    "msi.png",
    "nike.png",
    "ninja.png",
    "philips.png",
    "playstation.png",
    "reebok.png",
    "samsung.png",
    "sencor.png",
    "sony.png",
    "tefal.png",
    "uwell.png",
    "westinghous.png",
    "xbox.png",
    "xiaomi.png",
    "xvision.png",
    "zara.png",
]);

const brands = computed(() => {
    return brandsList.value.map(i => `/img/brands/${i}`)
})
// preload images using vueuse
const isReady = ref(false);

onMounted(async () => {
    const loaders = brands.value.map((src) => useImage({ src }));
    await Promise.all(loaders.map((l) => (l.isLoading.value ? l.promise : Promise.resolve())));
    isReady.value = true;
});
</script>

<template>
    <div class="relative w-full flex flex-col justify-center py-32 lg:py-48">
        <div class="flex-col-center gap-6 mb-24 sm:mb-32 container">
            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black"> 	بهترین برندهای موجود در فروشگاه </span>
            <p class="text-slate-500 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl">
گلچینی از برندهای شناخته‌شده که کیفیت و اصالت رو تضمین می‌کنن.
انتخاب‌هایی مطمئن برای خریدی راحت، هوشمندانه و بدون دغدغه.
            </p>
        </div>

        <!-- TOP MARQUEE -->
        <div class="-rotate-z-2 z-20 w-[110%] shadow-2xl shadow-black/7">
            <Marquee
                class="bg-blue-500 will-change-transform"
                :clone="true"
                dir="ltr"
                :duration="14"
            >
                <div
                    v-for="i in 6"
                    :key="i"
                    class="flex items-center gap-12 sm:gap-20 px-6 sm:px-10 h-[70px] sm:h-[140px] shrink-0 grow-0"
                >
                    <div class="text-[30px] text-white lg:text-[40px] mt-2 whitespace-nowrap font-semibold opacity-85">
                        HEYMLZ
                    </div>
                    <div class="size-[25px] sm:size-[45px] flex-center">
                        <NuxtImg
                            loading="lazy"
                            fetch-priority="low"
                            src="/img/heymlz/heymlz-logo.png"
                            class="w-full object-contain invert"
                        />
                    </div>
                </div>
            </Marquee>
        </div>

        <!-- BOTTOM MARQUEE -->
        <div class="rotate-z-2 z-10 w-[110%]">
            <Marquee
                v-if="isReady"
                class="bg-slate-100/70 will-change-transform"
                direction="reverse"
                :clone="true"
                dir="ltr"
                :duration="48"
            >
                <div
                    v-for="brand in brands"
                    :key="brand"
                    class="flex items-center px-6 sm:px-10 h-[70px] sm:h-[140px] shrink-0 grow-0"
                >
                    <NuxtImg
                        fetch-priority="low"
                        :src="brand"
                        class="opacity-25 object-contain w-[120px] sm:w-[200px] h-[45px] sm:h-[90px]"
                    />
                </div>
            </Marquee>
        </div>
    </div>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.4s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>
