<template>
  <Teleport to="body">
    <div v-if="visible" class="stat-tooltip" :style="{ left: x + 'px', top: y + 'px' }">
      <div class="tooltip-title">
        {{ title }}
      </div>
      <div class="tooltip-description">
        <p>{{ description }}</p>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
defineProps({
  visible: Boolean,
  x: Number,
  y: Number,
  title: String,
  description: String
});
</script>

<style scoped>
.stat-tooltip {
  position: fixed;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  max-width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.tooltip-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #fff;
}

.tooltip-description {
  font-size: 13px;
  color: #e0e0e0;
  line-height: 1.4;
}

.tooltip-description p {
  margin: 0;
}
</style>