import {
  LayoutComponentDefinition,
  LayoutContext,
} from "vibentec/component-map"
import React, { Suspense } from "react"
import SkeletonMegaMenu from "@modules/skeletons/components/vt-skeleton-mega-menu"
import MegaMenuWrapper from "@modules/layout/components/vt-mega-menu/mega-menu-wrapper"

interface MegaMenuProps {
  navLabel: {
    text: string
    className?: string
  }
}
export default function VtMegaMenu({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const { navLabel } = nodes.config as MegaMenuProps ?? {}
  return (
    <nav>
      <ul className="space-x-4 hidden small:flex">
        <li>
          <Suspense fallback={<SkeletonMegaMenu />}>
            <MegaMenuWrapper navLabel={navLabel} />
          </Suspense>
        </li>
      </ul>
    </nav>
  )
}