import NavigationMenuItem from "./NavigationMenuItem"

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

import type { NavigationMenuProps } from "@/types/components/header/navigationMenu"

export default function NavigationMenu({
  items,
  isMobile,
}: NavigationMenuProps) {
  const filteredItems = items.filter(
    ({ link, submenu }) => submenu.length || link
  )

  if (!filteredItems.length) {
    return null
  }

  return (
    <ul
      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
    >
      {filteredItems.map((item) => (
        <li key={item.title} className={styles.item}>
          <NavigationMenuItem isMobile={isMobile} item={item} />
        </li>
      ))}
    </ul>
  )
}