@props([
    'action' => null,
    'color' => null,
    'icon' => null,
])

<div {{ $attributes->class(array_merge(
    ['filament-forms-field-wrapper-hint flex items-center space-x-2 rtl:space-x-reverse'],
    match ($color) {
        'danger' => [
            'text-danger-500',
            'dark:text-danger-300' => config('tables.dark_mode'),
        ],
        'success' => [
            'text-success-500',
            'dark:text-success-300' => config('tables.dark_mode'),
        ],
        'warning' => [
            'text-warning-500',
            'dark:text-warning-300' => config('filament.dark_mode'),
        ],
        'primary' => [
            'text-primary-500',
            'dark:text-primary-300' => config('tables.dark_mode'),
        ],
        default => [
            'text-gray-500',
            'dark:text-gray-300' => config('tables.dark_mode'),
        ],
    },
)) }}>
    @if ($slot->isNotEmpty())
        <span class="text-xs leading-tight">
            {{ $slot }}
        </span>
    @endif

    @if ($icon)
        <x-dynamic-component :component="$icon" class="h-4 w-4" />
    @endif

    @if ($action && (! $action->isHidden()))
        <div class="filament-forms-field-wrapper-hint-action">
            {{ $action }}
        </div>
    @endif
</div>