<template>
  <UTooltip 
    :text="definition"
    :ui="{ 
      background: 'bg-white dark:bg-gray-900',
      ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
      rounded: 'rounded-lg',
      shadow: 'shadow-lg',
      base: 'px-3 py-2 text-sm max-w-xs'
    }"
    :popper="{ arrow: true }"
  >
    <template #text>
      <div class="space-y-2">
        <div class="font-medium">{{ term }}</div>
        <div class="text-gray-600">{{ definition }}</div>
        <NuxtLink 
          :to="`/glossary#${termId}`" 
          class="text-primary-600 hover:text-primary-700 text-xs inline-flex items-center gap-1"
          @click="$emit('glossary-click')"
        >
          <UIcon name="i-heroicons-book-open" class="w-3 h-3" />
          See full definition
        </NuxtLink>
      </div>
    </template>
    
    <span 
      class="underline decoration-dotted decoration-gray-400 hover:decoration-primary-500 cursor-help"
      :class="{ 'font-medium': emphasis }"
      :tabindex="0"
      :aria-describedby="`tooltip-${termId}`"
      @keydown.enter="$emit('glossary-click')"
      @keydown.space.prevent="$emit('glossary-click')"
    >
      <slot>{{ term }}</slot>
    </span>
  </UTooltip>
</template>

<script setup lang="ts">
interface Props {
  term: string
  termId: string
  definition: string
  emphasis?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  emphasis: false
})

defineEmits(['glossary-click'])
</script>
