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

import useHomeData from "~/composables/api/home/useHomeData";
import ProductsGrid from "~/components/global/ProductsGrid.vue";

// state

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

// ssr

const response = await suspense();

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-[80px]" />
        <Preview />
        <ProductsShowcase class="lg:mb-12" />
        <div class="py-[5rem]">
            <ProductsSlider
            title="محصولات پرفروش"
            :products="homeData!.products"
        />
        </div>
        <Categories class="mt-12" />
        <Brands />
        <LatestStories class="mb-20" />
    </div>
</template>
