@props([
    'trigger' => null,
    'content' => null,
    'text' => null,
    'position' => 'top',
    'icon' => null,
    'label' => null,
    'id' => null,
    'triggerAttributes' => [],
    'showWhen' => null,
    'disabled' => false,
])

@php
    $position = in_array($position, ['top', 'right', 'bottom', 'left'], true) ? $position : 'top';
    $tooltipId = $id ?: 'ui-tooltip-'.\Illuminate\Support\Str::uuid();
    $hasTriggerSlot = trim((string) $slot) !== '';
    $tooltipText = $text ?? $content ?? '';
@endphp

@if ($disabled)
    @if ($hasTriggerSlot)
        {{ $slot }}
    @elseif ($trigger)
        <span>{{ $trigger }}</span>
    @elseif ($icon)
        <x-ui.icon :name="$icon" size="14" />
        @if ($label)
            <span>{{ $label }}</span>
        @endif
    @else
        <x-ui.icon name="info" size="14" />
        @if ($label)
            <span>{{ $label }}</span>
        @endif
    @endif
@else
    <span
        {{ $attributes->class(['ui-tooltip', 'ui-tooltip--'.$position])->merge([
            'data-ui-tooltip' => true,
            'data-ui-tooltip-placement' => $position,
            'data-ui-tooltip-show-when' => $showWhen,
        ]) }}
    >
        <span
            @foreach ($triggerAttributes as $attribute => $value)
                {{ $attribute }}="{{ $value }}"
            @endforeach
            class="ui-tooltip__trigger"
            data-ui-tooltip-trigger
            @if ($hasTriggerSlot)
                data-ui-tooltip-description-owner="nested-control"
            @else
                tabindex="0"
                aria-describedby="{{ $tooltipId }}"
            @endif
        >
            @if ($hasTriggerSlot)
                {{ $slot }}
            @elseif ($trigger)
                <span>{{ $trigger }}</span>
            @elseif ($icon)
                <x-ui.icon :name="$icon" size="14" />
                @if ($label)
                    <span>{{ $label }}</span>
                @endif
            @else
                <x-ui.icon name="info" size="14" />
                @if ($label)
                    <span>{{ $label }}</span>
                @endif
            @endif
        </span>
        <span id="{{ $tooltipId }}" class="ui-tooltip__content" role="tooltip" data-ui-tooltip-content aria-hidden="true">
            {{ $tooltipText }}
        </span>
    </span>
@endif