import { Suspense } from "react"

import { getHeader } from "@/lib/trpc/memoizedRequests"

import MainMenu from "./MainMenu"
import TopMenu, { TopMenuSkeleton } from "./TopMenu"

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

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

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