import { Suspense } from 'react'
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'
import { blogSingleQueryOptions, mostVisitedBlogsQueryOptions } from '../hooks/useBlogsData'
import { NextPage } from 'next'
import SingleBlogPage from '../components/SingleBlogPage'
import Loading from './loading'

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

const SingleBlog: NextPage<PageProps> = async ({ params }) => {

    const { id } = await params
    console.log("loading", id);

    return (
        <Suspense fallback={<Loading />}>
            <BlogContent id={id} />
        </Suspense>
    )
}

async function BlogContent({ id }: { id: string }) {
    console.log(id)
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery(blogSingleQueryOptions(id))
    await queryClient.prefetchQuery(mostVisitedBlogsQueryOptions)

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

export default SingleBlog