import { Suspense } from "react"

import { serverClient } from "@/lib/trpc/server"

import Breadcrumbs from "@/components/Breadcrumbs"
import StickyMeetingPackageWidget from "@/components/StickyMeetingPackageWidget"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"

import StaticPage from ".."

export default async function ContentPage() {
  const caller = await serverClient()
  const contentPageRes = await caller.contentstack.contentPage.get()

  if (!contentPageRes) {
    return null
  }

  const { tracking, contentPage } = contentPageRes

  return (
    <>
      {contentPage.meeting_package?.show_widget && (
        <StickyMeetingPackageWidget
          destination={contentPage.meeting_package.location}
        />
      )}
      <Suspense
        fallback={
          <BreadcrumbsSkeleton
            color="Surface/Secondary/Default"
            size="contentWidth"
          />
        }
      >
        <Breadcrumbs color="Surface/Secondary/Default" size="contentWidth" />
      </Suspense>
      <StaticPage
        content={contentPage}
        tracking={tracking}
        pageType="content"
      />
    </>
  )
}
