{{--
    Tooltip Component - AdminLTE style
    
    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
    $positionStyles = [
        'top' => 'bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem;',
        'bottom' => 'top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.5rem;',
        'left' => 'right: 100%; top: 50%; transform: translateY(-50%); margin-right: 0.5rem;',
        'right' => 'left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.5rem;',
    ];
@endphp

<style>
    .tooltip-lte-wrapper {
        position: relative;
        display: inline-block;
    }
    .tooltip-lte {
        position: absolute;
        z-index: 1070;
        pointer-events: none;
    }
    .tooltip-lte-inner {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: #fff;
        background-color: #212529;
        border-radius: var(--lte-border-radius, 0.375rem);
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
        white-space: nowrap;
    }
    .dark .tooltip-lte-inner {
        background-color: #4b5563;
    }
</style>

<div 
    x-data="{ show: false }"
    @mouseenter="show = true"
    @mouseleave="show = false"
    class="tooltip-lte-wrapper"
    {{ $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="tooltip-lte"
        style="{{ $positionStyles[$position] ?? $positionStyles['top'] }}"
    >
        <div class="tooltip-lte-inner">
            {{ $text }}
        </div>
    </div>
</div>