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, sliderProductsQueryOptions } from './hooks/useProductData'
import Products from './ProductsPage'
import Loading from './loading'

export const metadata = {
    title: 'داناک | محصولات',
    description: 'ارائه راهکارهای مبتنی بر تکنولوژی نوآورانه برای بهبود کسب‌وکار، افزایش بهره‌وری و رشد پایدار .',
    openGraph: {
        title: 'داناک | محصولات',
        description: 'ارائه راهکارهای مبتنی بر تکنولوژی نوآورانه برای بهبود کسب‌وکار، افزایش بهره‌وری و رشد پایدار .',
        url: 'https://danakcorp.com/products',
        siteName: 'داناک',
        locale: 'fa_IR',
        type: 'website',
    },
}


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)
    await queryClient.prefetchQuery(sliderProductsQueryOptions)

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

export default ProductsPage