import type { TOC } from '@ember/component/template-only';
import { LinkTo } from '@ember/routing';
import { local } from 'embroider-css-modules';

import styles from './navigation-menu.css';

type MenuItem = {
  label: string;
  route: string;
};

interface NavigationMenuSignature {
  Args: {
    menuItems: MenuItem[];
    name?: string;
  };
}

const NavigationMenu = <template>
  <nav aria-label={{@name}} data-test-nav={{@name}}>
    <ul class={{styles.list}}>
      {{#each @menuItems as |menuItem|}}
        <li>
          <LinkTo
            class={{local styles "link"}}
            data-test-link={{menuItem.label}}
          >
            {{menuItem.label}}
          </LinkTo>
        </li>
      {{/each}}
    </ul>
  </nav>
</template> satisfies TOC<NavigationMenuSignature>;

export default NavigationMenu;