<template>
  <Popover v-model:open="isOpen">
    <!-- Trigger: agent name -->
    <PopoverTrigger as-child>
      <i
        class="mt-0.5"
        :class="`${icon}`"
        @mouseenter="isOpen = true"
        @mouseleave="isOpen = false"
      ></i>
    </PopoverTrigger>
    <!-- Popover content -->
    <PopoverContent
      @mouseenter="isOpen = true"
      @mouseleave="isOpen = false"
      side="top"
      class="max-w-xs text-left bg-white leading-5 text-foreground rounded-md shadow-md"
      style="line-height: 24px"
    >
      <div class="flex flex-col gap-2">
        <div class="flex items-center gap-2">
          <i :class="`${icon}`" style="line-height: 24px"></i>
          <h4 class="font-semibold text-base">{{ name }}</h4>
        </div>
        <p class="text-sm text-muted-foreground" v-if="description">
          {{ description }}
        </p>
        <p class="text-sm text-muted-foreground italic" v-else>No description available</p>
      </div>
    </PopoverContent>
  </Popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'

interface Props {
  name: string
  description?: string
  icon?: string
}

defineProps<Props>()

const isOpen = ref(false)
</script>
