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

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

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

    const queryClient = new QueryClient()
    await queryClient.prefetchQuery(blogSingleQueryOptions(id))
    return (
        <HydrationBoundary state={dehydrate(queryClient)}>
            <SingleBlogPage id={id} />
        </HydrationBoundary>
    )
}

export default SingleBlog