import { Suspense } from "react"

import { NavigationMenuListSkeleton } from "./NavigationMenu/NavigationMenuList"
import { LogoLink } from "./LogoLink"
import { MobileMenuSkeleton } from "./MobileMenu"
import MobileMenuWrapper from "./MobileMenuWrapper"
import MyPagesMenuWrapper from "./MyPagesMenuWrapper"
import NavigationMenu from "./NavigationMenu"

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

export default function MainMenu() {
  return (
    <div className={styles.mainMenu}>
      <nav className={styles.nav}>
        <LogoLink />
        <div className={styles.menus}>
          <Suspense fallback={<NavigationMenuListSkeleton />}>
            <NavigationMenu isMobile={false} />
          </Suspense>
          <MyPagesMenuWrapper />
          <Suspense fallback={<MobileMenuSkeleton />}>
            <MobileMenuWrapper>
              <NavigationMenu isMobile={true} />
            </MobileMenuWrapper>
          </Suspense>
        </div>
      </nav>
    </div>
  )
}
