import React from "react";
import clsx from "clsx";
import { m } from "framer-motion";

import styles from "./styles.module.scss";

interface NavListProps {
  items?: React.ReactNode[];
  children?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

const NavList = ({
  items = [],
  children,
  className,
  ...props
}: NavListProps) => {
  if (!items) return null;

  return (
    <m.nav className={clsx(styles.nav, className)} {...props}>
      {children}
      {items && items.length > 0 ? (
        <m.ul className={styles.list}>
          {items.map((item, index) => (
            <m.li key={index} className={styles.item}>
              {item}
            </m.li>
          ))}
        </m.ul>
      ) : null}
    </m.nav>
  );
};

export default NavList;