@props(['key' => null, 'title' => null, 'description' => null, 'placement' => 'top'])

@php
    $helpText = null;
    if ($key) {
        $helpText = config("help_texts.{$key}");
        $title = $title ?? $helpText['title'] ?? '';
        $description = $description ?? $helpText['short'] ?? '';
    }
@endphp

<div x-data="{ open: false }" class="inline-block relative" @click.away="open = false">
    <button 
        type="button"
        @click="open = !open"
        class="inline-flex items-center justify-center w-4 h-4 text-gray-400 hover:text-primary transition-colors"
        aria-label="Aide"
    >
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
        </svg>
    </button>
    
    <div 
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="absolute z-50 w-64 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg
               {{ $placement === 'top' ? 'bottom-full mb-2 left-1/2 -translate-x-1/2' : '' }}
               {{ $placement === 'bottom' ? 'top-full mt-2 left-1/2 -translate-x-1/2' : '' }}
               {{ $placement === 'left' ? 'right-full mr-2 top-1/2 -translate-y-1/2' : '' }}
               {{ $placement === 'right' ? 'left-full ml-2 top-1/2 -translate-y-1/2' : '' }}"
        style="display: none;"
    >
        @if($title)
            <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">{{ $title }}</h4>
        @endif
        @if($description)
            <p class="text-xs text-gray-600 dark:text-gray-400">{{ $description }}</p>
        @endif
    </div>
</div>