<script setup lang="ts">
import { computed } from 'vue';
import { NavigationMenuLink as ShadcnNavigationMenuLink } from '@/components/core/navigation-menu';
import type {
  UiNavigationMenuLinkProps,
  UiNavigationMenuLinkEmits,
} from './types';

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

const props = defineProps<UiNavigationMenuLinkProps>();

const emit = defineEmits<UiNavigationMenuLinkEmits>();

// Compute aria-current value: 'page' when active, undefined otherwise
const ariaCurrent = computed(() => (props.active ? 'page' : undefined));
</script>

<template>
  <ShadcnNavigationMenuLink
    :active="props.active"
    :as-child="props.asChild"
    :aria-current="ariaCurrent"
    @select="emit('select', $event)"
  >
    <slot />
  </ShadcnNavigationMenuLink>
</template>
