<template>
  <Menubar :model="items" class="px-8">

    <!-- Menu links -->
    <template #item="{ item, props, hasSubmenu }">
      <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
        <a :href="href" v-bind="props.action" @click="navigate">
          <span :class="item.icon" />
          <span>{{ item.label }}</span>
        </a>
      </router-link>
      <a v-else :href="item.url" :target="item.target" v-bind="props.action">
        <i :class="item.icon" />
        <span>{{ item.label }}</span>
        <span v-if="hasSubmenu" class="mdi mdi-chevron-down" />
      </a>
    </template>

    <!-- User profile icon -->
    <template #end>
      <i class="mdi mdi-account-outline" />
    </template>
  </Menubar>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
    {
        label: 'Home',
        icon: 'mdi mdi-home-outline',
        route: '/'
    },
    {
        label: 'Tools',
        icon: 'mdi mdi-wrench-outline',
        route: '/toolkit'
    },
    {
        label: 'Learn',
        icon: 'mdi mdi-lightbulb-outline',
        items: [
            {
                label: 'Pronunciation',
                icon: 'mdi mdi-waveform',
                route: '/speak'
            },
            {
                label: 'Anki Decks',
                icon: 'mdi mdi-card-multiple-outline',
                route: '/decks'
            },
            {
                label: 'Self Testing',
                icon: 'mdi mdi-send-variant-outline',
                route: '/test'
            }
        ]
    }
]);
</script>