<script setup lang="ts">
import Menubar from 'primevue/menubar';
import type IVMenuBar from './IVMenuBar.type';
import type { MenubarSlots } from 'primevue/menubar';
import { computed } from 'vue';
const props = withDefaults(defineProps<IVMenuBar>(), {
  searchbarId: 'searchbar-header',
  serviceTitle: undefined,
  serviceDescription: undefined,
  logo: false,
  logoText: undefined,
  breakpoints: '960px',
  quickLinks: undefined,
  menuLabel: undefined
})

type VMenuBarSlots = MenubarSlots & {
  default?: (props: Record<string, unknown>) => unknown
};

const slots = defineSlots<VMenuBarSlots>();

const menuBarSlotsKeys = [
  'start',
  'end',
  'item',
  'button',
  'buttonicon',
  'submenuicon',
  'itemicon'
] as const

const availableSlots = computed(() =>
  menuBarSlotsKeys.filter((key) => !!slots[key]).map((key) => [key, slots[key]])
);
</script>

<template>
  <Menubar
    role="banner"
    :model="props.quickLinks"
    :breakpoint="props.breakpoints"
  >
    <template
      v-for="([name]) in availableSlots"
      :key="name"
      v-slot:[name]="slotProps"
    >
      <slot :name="name" v-bind="slotProps" />
    </template>
    <slot></slot>
  </Menubar>
</template>
