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;