import React from 'react';
import { useRouter } from 'next/router';
import classNames from 'classnames';
import styles from './NavMenu.module.css';

export default function NavMenu({ options = [], className, onSelect = () => {} }) {
  const router = useRouter();

  return (
    <div className={classNames(styles.menu, className)}>
      {options
        .filter(({ hidden }) => !hidden)
        .map(option => {
          const { label, value, className: customClassName, render } = option;

          return render ? (
            render(option)
          ) : (
            <div
              key={value}
              className={classNames(styles.option, customClassName, {
                [styles.selected]: router.asPath === value,
              })}
              onClick={e => onSelect(value, e)}
            >
              {label}
            </div>
          );
        })}
    </div>
  );
}