<script setup lang="ts">
import type { NavigationMenuTriggerProps } from 'reka-ui';
import { ChevronDown } from 'lucide-vue-next';
import { NavigationMenuTrigger, useForwardProps } from 'reka-ui';
import { cn } from '@/lib/utils';
import { navigationMenuTriggerStyle } from '.';

defineOptions({ inheritAttrs: false });

const props = defineProps<NavigationMenuTriggerProps>();

const forwardedProps = useForwardProps(props);
</script>

<template>
  <NavigationMenuTrigger
    data-slot="navigation-menu-trigger"
    v-bind="{ ...forwardedProps, ...$attrs }"
    :class="cn(navigationMenuTriggerStyle(), 'group', $attrs.class ?? '')"
  >
    <slot />
    <ChevronDown
      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuTrigger>
</template>
