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 { landingQueryOptions } from './home/hooks/useHomeData'
import LangingPage from './home/LangingPage'
import Loading from './loading'

const Home: NextPage = () => {
  return (
    <Suspense fallback={<Loading />}>
      <HomeContent />
    </Suspense>
  )
}

async function HomeContent() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery(landingQueryOptions)

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

export default Home