import { Suspense } from "react"

import { env } from "@/env/server"
import { getHeader, getName } from "@/lib/trpc/memoizedRequests"

import CurrentHeader from "@/components/Current/Header"
import { getLang } from "@/i18n/serverContext"

import HeaderFallback from "../Current/Header/HeaderFallback"
import MainMenu from "./MainMenu"
import TopMenu, { TopMenuSkeleton } from "./TopMenu"

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

export default async function Header() {
  void getName()

  const lang = await getLang()
  if (!env.isLangLive(lang)) {
    return (
      <Suspense fallback={<HeaderFallback />}>
        <CurrentHeader />
      </Suspense>
    )
  }

  void getHeader()

  return (
    <header className={styles.header}>
      <Suspense fallback={<TopMenuSkeleton />}>
        <TopMenu />
      </Suspense>
      <MainMenu />
    </header>
  )
}