<script lang="ts" setup>
// types

type Props = {
    title?: string;
    products: ProductListItem[];
    withHeader?: boolean;
};

// props

withDefaults(defineProps<Props>(), {
    withHeader: true,
});
</script>

<template>
    <section class="w-full flex flex-col gap-10 @min-[48rem]:gap-[4rem] py-[5rem] container @container">
        <div
            v-if="withHeader"
            class="w-full flex justify-between items-center"
        >
            <span class="text-black typo-h-6 @max-[40rem]:text-xl @min-[48rem]:typo-h-5 @min-[64rem]:typo-h-4">
                {{ title }}
            </span>
            <NuxtLink to="/products">
                <Button
                    variant="primary"
                    class="rounded-full @max-[48rem]:h-[38px] @max-[48rem]:text-xs"
                    end-icon="ci:arrow-left"
                >
                    نمایش همه
                </Button>
            </NuxtLink>
        </div>
        <ul
            class="grid grid-cols-2 @min-[40rem]:grid-cols-3 @min-[64rem]:grid-cols-4 @min-[80rem]:grid-cols-5 gap-y-8 gap-5 @min-[40rem]:gap-8"
        >
            <li
                class="w-full"
                v-for="product in products"
                :key="product.id"
            >
                <ProductCard
                    :id="product.id"
                    :slug="product.slug"
                    :title="product.name"
                    :picture="product.main_image"
                    :colors="product.colors"
                    :price="product.best_deal_price_before_discount"
                    :rate="product.rating"
                    :dark-layer="true"
                    :tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined"
                    :price-after="product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined"
                />
            </li>
        </ul>
    </section>
</template>
