Break into smaller components

components/Header/TopMenu/index.tsx

@@ -1,5 +1,7 @@
 import { Suspense } from "react"
 
+import { serverClient } from "@/lib/trpc/server"
+
 import { GiftIcon, SearchIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
@@ -10,23 +12,28 @@ import styles from "./topMenu.module.css"
 
 import type { TopMenuProps } from "@/types/components/header/topMenu"
 
-export default async function TopMenu({
-  languageSwitcher,
-  topLink,
-}: TopMenuProps) {
-  const intl = await getIntl()
+export default async function TopMenu({}: TopMenuProps) {
+  const [intl, languages, headerData] = await Promise.all([
+    getIntl(),
+    serverClient().contentstack.languageSwitcher.get(),
+    serverClient().contentstack.base.header(),
+  ])
+
+  if (!languages || !headerData) {
+    return null
+  }
 
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
-        {topLink ? (
-          <HeaderLink className={styles.topLink} href={topLink.href}>
+        {headerData.topLink ? (
+          <HeaderLink className={styles.topLink} href={headerData.topLink.href}>
             <GiftIcon width={20} height={20} color="burgundy" />
-            {topLink.title}
+            {headerData.topLink.title}
           </HeaderLink>
         ) : null}
         <div className={styles.options}>
-          {languageSwitcher}
+          <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
           <HeaderLink href="#">
             <SearchIcon width={20} height={20} color="burgundy" />
             {intl.formatMessage({ id: "Find booking" })}