{{--
    Tooltip Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    
    Usage:
    <x-proxmox::ui.tooltip text="This is a tooltip">
        <button>Hover me</button>
    </x-proxmox::ui.tooltip>
--}}

@props([
    'text',
    'position' => 'top', // top, bottom, left, right
])

@php
    $positionClasses = [
        'top' => 'bottom-full left-1/2 -translate-x-1/2 mb-2',
        'bottom' => 'top-full left-1/2 -translate-x-1/2 mt-2',
        'left' => 'right-full top-1/2 -translate-y-1/2 mr-2',
        'right' => 'left-full top-1/2 -translate-y-1/2 ml-2',
    ];
@endphp

<div 
    x-data="{ show: false }"
    @mouseenter="show = true"
    @mouseleave="show = false"
    class="relative inline-block"
    {{ $attributes }}
>
    {{ $slot }}
    
    <div
        x-show="show"
        x-cloak
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="absolute z-[1070] pointer-events-none {{ $positionClasses[$position] ?? $positionClasses['top'] }}"
    >
        <div class="px-3 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-600 rounded-lg shadow-lg whitespace-nowrap">
            {{ $text }}
        </div>
    </div>
</div>