import NextLink from "next/link"
import { Suspense } from "react"

import Image from "@/components/Image"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

import MobileMenuWrapper from "./MobileMenuWrapper"
import MyPagesMenuWrapper from "./MyPagesMenuWrapper"
import NavigationMenu from "./NavigationMenu"

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

export default async function MainMenu() {
  const lang = getLang()

  const intl = await getIntl()

  return (
    <div className={styles.mainMenu}>
      <nav className={styles.nav}>
        <NextLink className={styles.logoLink} href={`/${lang}`}>
          <Image
            alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
            className={styles.logo}
            data-js="scandiclogoimg"
            data-nosvgsrc="/_static/img/scandic-logotype.png"
            itemProp="logo"
            height={22}
            src="/_static/img/scandic-logotype.svg"
            width={103}
          />
        </NextLink>
        <div className={styles.menus}>
          <Suspense fallback={"Loading nav"}>
            <NavigationMenu isMobile={false} />
          </Suspense>
          <Suspense fallback={"Loading profile"}>
            <MyPagesMenuWrapper />
          </Suspense>
          <Suspense fallback={"Loading menu"}>
            <MobileMenuWrapper>
              <NavigationMenu isMobile={true} />
            </MobileMenuWrapper>
          </Suspense>
        </div>
      </nav>
    </div>
  )
}