import { NextPage } from 'next'
import Layout from '@/hoc/Layout'
import Carousel from './home/components/Carousel'
import HotOffer from './home/components/HotOffer'
import Categories from './home/components/Categories'
import Banners3 from './home/components/Banners3'
import Blogs from './home/components/Blogs'
import NewestProducts from './home/components/LatestProducts'
import Banners4 from './home/components/Banners4'
import PopularProducts from './home/components/PopularProducts'
import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'
import { Suspense } from 'react'
import PageLoading from '@/components/PageLoading'
import { getLandingQueryOptions } from './home/hooks/useHomeData'

const HomePage: NextPage = () => {

  return (
    <div>
      <Carousel />
      <div className='mt-24 px-20'>
        <HotOffer />
        <div className='mt-24'>
          <Categories />
        </div>
        <div className='mt-24'>
          <Banners3 />
        </div>
      </div>

      <div className='mt-24 bg-[#FAF8F6] p-20'>
        <NewestProducts />
        <div className='mt-24'>
          <Banners4 />
        </div>
        <div className='mt-20'>
          <PopularProducts />
        </div>
      </div>

      <div className='mt-24 px-20'>
        <Blogs />
      </div>
    </div>
  )
}

export default async function HomePageWithLayout() {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery(getLandingQueryOptions)

  const dehydratedState = dehydrate(queryClient)

  return (
    <Layout>
      <Suspense fallback={<PageLoading />}>
        <HydrationBoundary state={dehydratedState}>
          <HomePage />
        </HydrationBoundary>
      </Suspense>
    </Layout>
  )
}