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

import useHomeData from "~/composables/api/home/useHomeData";

// state

const { data: homeData, suspense } = useHomeData();

// ssr

const response = await suspense();

console.log(response.error)
console.log("----- END ERROR ------")
console.log(response)

if (response.isError) {
    throw createError({
        statusCode: 500,
        statusMessage: `Landing error : ${response.error.message}`,
    });
}
</script>

<template>
    <div class="w-full">
        <!-- <LoadingOverlay /> -->
        <Hero class="mb-20 max-md:mt-20" />

        <ComingSoonSection />

        <div class="py-20">
            <ProductsSlider
                title="محصولات پرتخفیف"
                icon-image="/img/discount-section.gif"
                :products="homeData!.lot_of_discount_products"
            />
        </div>
        <div class="py-20">
            <ProductsSlider
                title="محصولات محبوب"
                 icon-image="/img/most-popular-section.gif"
                :products="homeData!.trends_products"
            />
        </div>
        <ProductsShowcase class="lg:mb-12" />
        <div class="py-20">
            <ProductsSlider
                title="محصولات پرفروش"
                 icon-image="/img/most-sell-section.gif"
                :products="homeData!.top_seller_products"
            />
        </div>
        <div class="py-20">
            <ProductsSlider
                title="محصولات پربازدید"
                 icon-image="/img/most-viewed-section.gif"
                :products="homeData!.most_viewed_products"
            />
        </div>
        <Categories class="mt-12" />
        <Brands />
        <Preview />
        <LatestStories class="mb-20" />
    </div>
</template>
