<script lang="ts" setup>

import ChatButton from "~/components/product/ChatBox/ChatButton.vue";
import useGetProduct from "~/composables/api/product/useGetProduct";

const route = useRoute();

const id = route.params.id as string | undefined;

const { suspense } = useGetProduct(id);

// ssr

await useAsyncData(async () => {
    const response = await suspense();

    if (response.isError) {
        throw createError({
            statusCode: 404,
            statusMessage: `error : ${response.error.message}`,
        })
    }
});

</script>

<template>
    <div class="w-full flex flex-col gap-20">
        <ProductHero />
        <ProductVideo />
        <ProductComments />
        <ProductDetails />
        <ProductsSlider title="محصولات مشابه" />
        <ChatButton />
    </div>
</template>
