<template>
    <section class="producers">
        <h2>{{ title }}</h2>
        <ul>
            <li v-for="({ link, logo, title }, i) in creatorBrand" :key="i">
                <router-link :to="{ path: '/search', query: { brand: link } }">
                    <img :src="logo" :alt="title" />
                </router-link>
            </li>
        </ul>
    </section>
</template>

<script setup>
defineProps(['title'])

const { creatorBrand } = inject('data')
</script>

<style lang="scss">
.producers {
    @apply w-full min-h-[18.9rem] bg-[#FAFAFA] flex flex-col items-center gap-12 py-12 mt-16 max-lg:hidden;

    h2 {
        @apply text-primary-600 text-3xl font-bold font-vazir;
    }

    ul {
        @apply w-full flex flex-wrap items-center justify-center gap-12;

        li {
            @apply h-[2.8rem] w-11;

            img {
                @apply w-full h-full object-contain object-center;
            }
        }
    }
}
</style>
