import { Suspense } from "react"

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

import LoadingSpinner from "../LoadingSpinner"
import MainMenu from "./MainMenu"
import TopMenu from "./TopMenu"

import styles from "./header.module.css"

export default async function Header({
  languageSwitcher,
}: {
  languageSwitcher: React.ReactNode
}) {
  const [languages, headerData] = await Promise.all([
    serverClient().contentstack.languageSwitcher.get(),
    serverClient().contentstack.base.header(),
  ])

  if (!languages || !headerData) {
    return null
  }

  return (
    <header className={styles.header}>
      <Suspense fallback={<LoadingSpinner />}>
        <TopMenu
          languageSwitcher={languageSwitcher}
          topLink={headerData.topLink}
        />
        <MainMenu
          languageUrls={languages.urls}
          menuItems={headerData.menuItems}
          topLink={headerData.topLink}
        />
      </Suspense>
    </header>
  )
}