<template>
  <ul :id="id" class="cpMenuList">
    <li v-for="(item, index) in items" :key="index" :class="getItemClass(item)" :role="getItemRole(item)">
      <cp-menu-item
        v-if="!item.separator"
        v-bind="item"
        role="menuitem"
        @async-complete="emit('asyncComplete')"
        @click="emit('click')"
      />
    </li>
  </ul>
</template>

<script setup lang="ts">
import type { MenuItem } from 'primevue/menuitem'

import CpMenuItem from '@/components/CpMenuItem.vue'

interface Props {
  id?: string
  items?: MenuItem[]
}

withDefaults(defineProps<Props>(), {
  id: undefined,
  items: () => [],
})

const emit = defineEmits(['click', 'asyncComplete'])

const getItemClass = (item: MenuItem) => (item.separator ? 'cpMenuList__separator' : 'cpMenuList__item')
const getItemRole = (item: MenuItem) => (item.separator ? 'separator' : 'none')
</script>

<style lang="scss">
.cpMenuList {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: var(--cp-spacing-sm);
  list-style: none;

  &__item {
    display: block;
  }

  &__separator {
    height: 1px;
    background-color: var(--cp-border-soft);
  }
}
</style>
