import { HydrationBoundary, dehydrate } from '@tanstack/react-query'
import { QueryClient } from '@tanstack/react-query'
import { Suspense } from 'react'
import BlogList from './components/BlogList'
import Loading from './loading'
import { blogCategoriesQueryOptions, blogsQueryOptions, blogCombinedQueryOptions, mostVisitedBlogsQueryOptions } from './hooks/useBlogsData'

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

export default function BlogsPage() {
    return (
        <Suspense fallback={<Loading />}>
            <BlogsContent />
        </Suspense>
    )
}

async function BlogsContent() {
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery(blogsQueryOptions)
    await queryClient.prefetchQuery(blogCategoriesQueryOptions)
    await queryClient.prefetchQuery(blogCombinedQueryOptions)
    await queryClient.prefetchQuery(mostVisitedBlogsQueryOptions)

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