import Layout from '@/hoc/Layout'
import SingleProduct from '@/app/product/components/SingleProduct'
import { getProductQueryOptions } from '@/app/product/hooks/useProductData'
import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'
import { Suspense } from 'react'
import PageLoading from '@/components/PageLoading'

interface SingleProductPageProps {
    params: Promise<{ id: string }>
}


export default async function SingleProductPage({ params }: SingleProductPageProps) {
    const { id } = await params
    const queryClient = new QueryClient()

    await queryClient.prefetchQuery(getProductQueryOptions(id))
    const dehydratedState = dehydrate(queryClient)

    return (
        <Layout>
            <Suspense fallback={<PageLoading />}>
                <HydrationBoundary state={dehydratedState}>
                    <SingleProduct id={id} />
                </HydrationBoundary>
            </Suspense>
        </Layout>
    )
}