<template>
  <div class="tooltip-container">
    <div 
      ref="triggerRef"
      class="tooltip-trigger"
      @mouseenter="showTooltip = true"
      @mouseleave="showTooltip = false"
    >
      <slot name="trigger">
        <Info class="icon"/>
      </slot>
    </div>
    
    <div 
      v-if="showTooltip"
      class="tooltip-box"
    >
      <slot>
        <p>{{ text }}</p>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Info } from 'lucide-vue-next'

defineProps({
  text: {
    type: String,
    default: ''
  }
})

const showTooltip = ref(false)
</script>

<style scoped>
/* Container */
.tooltip-container {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* Trigger Icon */
.tooltip-trigger {
	cursor: pointer;
	display: flex;
	align-items: center;
}

.icon {
	width: 20px;
	height: 20px;
	color: var(--color-primary);
	transition: color 0.2s;
}

.icon:hover {
	color: var(--color-primary-hover);
}

/* Tooltip Box */
.tooltip-box {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 8px;
	padding: 8px 8px; /* Reduced padding */
	min-width: 150px; /* Prevents shrinking too much */
	max-width: 250px; /* Limits width */
	width: auto; /* Adapts to content */
	background-color: var(--color-steel-blue);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	white-space: normal; /* Allows wrapping */
	word-break: break-word; /* Ensures long words wrap */
	text-align: center; /* Centers text */
	z-index: 999;
	pointer-events: none;
	opacity: 0;
	animation: fadeIn 0.2s forwards;
}

/* Fade-in Animation */
@keyframes fadeIn {

	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-5px);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}
</style>