<script lang="ts" setup>

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

const route = useRoute();

const id = route.params.id as string | undefined;
const page = ref(1);

const { suspense: suspenseProduct } = useGetProduct(id);
const { suspense: suspenseComments } = useGetComments(id, page);

// ssr

const productResponse = await suspenseProduct();
const commentsResponse = await suspenseComments();

if (productResponse.isError || commentsResponse.isError) {
    throw createError({
        statusCode: 404,
        statusMessage: `error : product ${id} prefetch error`
    });
}

</script>

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