<script setup lang="ts">
import NodeBasicInfoTooltipContent from './NodeBasicInfoTooltipContent.vue'
import type { NodeTooltipInfo } from '@/types/traceTooltip'

withDefaults(
  defineProps<{
    info: NodeTooltipInfo | null
    position?: 'fixed' | 'absolute'
    zClass?: string
  }>(),
  {
    position: 'fixed',
    zClass: 'z-30',
  },
)
</script>

<template>
  <div
    v-if="info"
    :class="[
      position,
      zClass,
      'rounded-md border bg-popover text-popover-foreground p-2 shadow-md pointer-events-none max-w-[500px]',
    ]"
    :style="{ left: `${info.x}px`, top: `${info.y}px` }"
  >
    <NodeBasicInfoTooltipContent
      :name="info.name"
      :start="info.start"
      :end="info.end"
      :timestamp="info.timestamp"
    />
  </div>
</template>
