<script setup lang="ts">
import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'reka-ui';
import { NavigationMenuLink, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';

defineOptions({ inheritAttrs: false });

const props = defineProps<NavigationMenuLinkProps>();
const emits = defineEmits<NavigationMenuLinkEmits>();

const forwarded = useForwardPropsEmits(props, emits);
</script>

<template>
  <NavigationMenuLink
    data-slot="navigation-menu-link"
    v-bind="{ ...forwarded, ...$attrs }"
    :class="
      cn(
        // Default: transparent bg + `content-on-surface-primary` text.
        // Hover / data-[active]: use the muted surface bg so open/current
        // links read as pressed without switching to the `accent` palette.
        // Focus-visible: mirrors UiButton's focus recipe (focus-ring border
        // + tinted ring shadow at 3px) so keyboard focus reads consistently
        // across buttons and nav links.
        'bg-transparent text-content-on-surface-primary border border-transparent flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow,border-color] outline-none hover:bg-background-surface-muted data-[active]:bg-background-surface-muted [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-border-surface-focus-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] [&_svg:not([class*=\'size-\'])]:size-4',
        $attrs.class ?? '',
      )
    "
  >
    <slot />
  </NavigationMenuLink>
</template>
