<template>
    <section>
        <div class="relative flex w-40">
            <span class="font-semibold text-black text-sm ml-4">{{ t('home.partners.title') }}</span>
            <img src="@/assets/imgs/sub-title-bg.png" alt="" class="absolute right-0 h-full">
        </div>
        <div>
            <div class="mt-4 bg-white">
                <div class="grid grid-rows-3">
                    <div class="grid grid-cols-3" v-for="item in list">
                        <div v-for="linkObj in item"><img :src="linkObj.link" alt="" class="w-36 h-20"></div>
                    </div>

                </div>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'
import img1  from '@/assets/imgs/home/shopify.png'
import img2  from '@/assets/imgs/home/wish.png'
import img3  from '@/assets/imgs/home/onbuy.png'
import img4  from '@/assets/imgs/home/aliexpress.png'
import img5  from '@/assets/imgs/home/amazon.png'
import img6  from '@/assets/imgs/home/ebay.png'
import img7  from '@/assets/imgs/home/tiktok.jpg'
import img8  from '@/assets/imgs/home/manomano.png'
import img9  from '@/assets/imgs/home/zalando.png'

const { t } = useI18n()

interface ListItem {
    type: number;
    link: string;
}

const defaultList = [
    { type: 2,link: img1 },
    { type: 2,link: img2 },
    { type: 2,link: img3 },
    { type: 3,link: img4 },
    { type: 3,link: img5 },
    { type: 3,link: img6 },
    { type: 4,link: img7 },
    { type: 4,link: img8 },
    { type: 4,link: img9 },
]

const list = ref([])
const groupByType = (list: ListItem[]): Record<string, ListItem[]> => {
    return list.reduce((acc, item) => {
        if (!acc[item.type]) {
            acc[item.type] = [];
        }
        acc[item.type].push(item);
        return acc;
    }, {} as Record<string, ListItem[]>);
}
const setList = (newList:any) => {
    if (newList.length === 0 || newList.length%3 !== 0) {
        list.value = groupByType(defaultList)
    }else{
        list.value = groupByType(newList)
    }
}

defineExpose({
    setList
})
</script>