@props(['message', 'width' => 'max-w-xs', 'position' => 'top'])

<div x-data="tooltip('{{ $position }}')" {{ $attributes->merge(['class' => 'relative inline-block']) }}>
    <!-- Tooltip Target -->
    <div @mouseenter="show = true; updatePosition($el)" @mouseleave="show = false" class="inline-block">
        {{ $slot }}
    </div>

    <!-- Tooltip Content -->
    <div x-show="show" x-transition.opacity x-ref="tooltip" :class="tooltipClasses"
        class="absolute bg-gray-800 text-white text-sm px-3 py-1 rounded-md shadow-md {{ $width }}" x-cloak>
        {{ $message }}
    </div>
</div>

<script>
    function tooltip(position) {
        return {
            show: false,
            tooltipClasses: '',

            updatePosition(triggerEl) {
                this.$nextTick(() => {
                    let 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'
                    };

                    this.tooltipClasses = positions[position] || positions['top']; // Default to top if invalid
                });
            }
        };
    }
</script>