{{--
    Tooltip Component - TailServer Theme
    
    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
    $positions = [
        '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',
    ];
    
    $arrows = [
        'top' => 'top-full left-1/2 -translate-x-1/2 border-t-zinc-800 border-x-transparent border-b-transparent border-4',
        'bottom' => 'bottom-full left-1/2 -translate-x-1/2 border-b-zinc-800 border-x-transparent border-t-transparent border-4',
        'left' => 'left-full top-1/2 -translate-y-1/2 border-l-zinc-800 border-y-transparent border-r-transparent border-4',
        'right' => 'right-full top-1/2 -translate-y-1/2 border-r-zinc-800 border-y-transparent border-l-transparent border-4',
    ];
@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 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"
        class="absolute z-50 {{ $positions[$position] ?? $positions['top'] }} pointer-events-none"
    >
        <div class="relative bg-zinc-900 text-white text-xs font-medium rounded-lg px-2.5 py-1.5 whitespace-nowrap shadow-xl ring-1 ring-white/10">
            {{ $text }}
            <div class="absolute {{ $arrows[$position] ?? $arrows['top'] }}"></div>
        </div>
    </div>
</div>