import { cx } from "class-variance-authority"

import SkeletonShimmer from "@/components/SkeletonShimmer"

import NavigationMenuItem from "../NavigationMenuItem"

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

import type { NavigationMenuListProps } from "@/types/components/header/navigationMenuList"

export default function NavigationMenuList({
  isMobile,
  items,
}: NavigationMenuListProps) {
  return (
    <ul
      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
    >
      {items.map((item) => (
        <li key={item.title} className={styles.item}>
          <NavigationMenuItem isMobile={isMobile} item={item} />
        </li>
      ))}
    </ul>
  )
}

export function NavigationMenuListSkeleton() {
  return (
    <ul className={cx(styles.navigationMenu, styles.desktop)}>
      <li className={styles.item}>
        <SkeletonShimmer width="30ch" />
      </li>
    </ul>
  )
}