<template>
  <div class="tooltip-wrapper" @mouseenter="showTooltip" @mouseleave="hideTooltip">
    <slot></slot>
    <div v-if="visible" class="tooltip" :class="position">
      {{ text }}
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Tooltip',
  props: {
    text: {
      type: String,
      required: true
    },
    position: {
      type: String,
      default: 'top',
      validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
    },
    delay: {
      type: Number,
      default: 500
    }
  },
  setup(props) {
    const visible = ref(false)
    let timeoutId = null

    const showTooltip = () => {
      timeoutId = setTimeout(() => {
        visible.value = true
      }, props.delay)
    }

    const hideTooltip = () => {
      if (timeoutId) {
        clearTimeout(timeoutId)
        timeoutId = null
      }
      visible.value = false
    }

    return {
      visible,
      showTooltip,
      hideTooltip
    }
  }
}
</script>

<style scoped>
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  z-index: 1000;
  padding: 0.5rem 0.75rem;
  background: rgba(15, 23, 42, 0.95);
  color: #f8fafc;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  pointer-events: none;
  animation: fadeIn 0.2s ease-out;
}

.tooltip.top {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.bottom {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.left {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.right {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
}

.tooltip.top::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: rgba(15, 23, 42, 0.95);
}

.tooltip.bottom::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: rgba(15, 23, 42, 0.95);
}

.tooltip.left::before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: rgba(15, 23, 42, 0.95);
}

.tooltip.right::before {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: rgba(15, 23, 42, 0.95);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 768px) {
  .tooltip {
    display: none;
  }
}
</style>