import { NextPage } from 'next'
import { Suspense } from 'react'
import { HydrationBoundary } from '@tanstack/react-query'
import { dehydrate } from '@tanstack/react-query'
import { QueryClient } from '@tanstack/react-query'
import { categoriesQueryOptions, danakServiceSuggestedQueryOptions, servicesQueryOptions } from './hooks/useProductData'
import Products from './ProductsPage'
import Loading from './loading'

const ProductsPage: NextPage = () => {
    return (
        <Suspense fallback={<Loading />}>
            <ProductsContent />
        </Suspense>
    )
}

async function ProductsContent() {
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery(servicesQueryOptions)
    await queryClient.prefetchQuery(categoriesQueryOptions)
    await queryClient.prefetchQuery(danakServiceSuggestedQueryOptions)

    return (
        <HydrationBoundary state={dehydrate(queryClient)}>
            <Products />
        </HydrationBoundary>
    )
}

export default ProductsPage