@props([
    'intro',
    'portalUrl' => null,
    'linkLabel',
    'hintPrefix' => '',
    'hintSuffix' => '',
    'notConfiguredMessage',
])

<div class="space-y-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
    <p>{{ $intro }}</p>

    @if (filled($portalUrl))
        <div class="flex flex-wrap items-center gap-2">
            <span>{{ $hintPrefix }}</span>

            <x-filament::button
                tag="a"
                :href="$portalUrl"
                target="_blank"
                rel="noopener noreferrer"
                size="sm"
                color="primary"
                icon="heroicon-o-arrow-top-right-on-square"
                icon-position="after"
            >
                {{ $linkLabel }}
            </x-filament::button>

            <span>{{ $hintSuffix }}</span>
        </div>
    @else
        <p class="text-warning-600 dark:text-warning-400">
            {{ $notConfiguredMessage }}
        </p>
    @endif
</div>
