<script setup lang="ts">
import { NavigationMenu as ShadcnNavigationMenu } from '@/components/core/navigation-menu';
import type { UiNavigationMenuProps, UiNavigationMenuEmits } from './types';

defineOptions({
  name: 'UiNavigationMenu',
});

const props = withDefaults(defineProps<UiNavigationMenuProps>(), {
  modelValue: undefined,
  defaultValue: undefined,
  orientation: 'horizontal',
  dir: 'ltr',
  delayDuration: 200,
  skipDelayDuration: 300,
  disableClickTrigger: false,
  disableHoverTrigger: false,
  viewport: true,
});

const emit = defineEmits<UiNavigationMenuEmits>();
</script>

<template>
  <ShadcnNavigationMenu
    :model-value="props.modelValue"
    :default-value="props.defaultValue"
    :orientation="props.orientation"
    :dir="props.dir"
    :delay-duration="props.delayDuration"
    :skip-delay-duration="props.skipDelayDuration"
    :disable-click-trigger="props.disableClickTrigger"
    :disable-hover-trigger="props.disableHoverTrigger"
    :viewport="props.viewport"
    @update:model-value="emit('update:modelValue', $event)"
  >
    <slot />
  </ShadcnNavigationMenu>
</template>
