<div class="p-5 sm:p-6">
    <div class="flex items-start gap-3.5">
        <span @class([
            'grid h-10 w-10 shrink-0 place-items-center rounded-md border',
            'border-offline/30 bg-offline/10 text-offline' => $danger,
            'border-accent/30 bg-accent/10 text-accent-text' => ! $danger,
        ])>
            <x-icon :name="$icon ?: ($danger ? 'alert' : 'activity')" class="h-5 w-5" />
        </span>
        <div class="min-w-0 flex-1">
            <h2 class="font-display text-base font-semibold text-ink">{{ $heading }}</h2>
            <p class="mt-1 text-sm leading-relaxed text-ink-2">{{ $body }}</p>
            @if ($this->targetLabel)
                <p class="mt-2 truncate font-mono text-[11px] text-ink-4">{{ $this->targetLabel }}</p>
            @endif
        </div>
    </div>

    <div class="mt-6 flex items-center justify-end gap-2">
        <x-btn variant="secondary" wire:click="$dispatch('closeModal')">{{ __('common.cancel') }}</x-btn>
        <x-btn :variant="$danger ? 'danger' : 'primary'" wire:click="confirm" wire:target="confirm" wire:loading.attr="disabled">
            <x-icon :name="$icon ?: ($danger ? 'alert' : 'activity')" class="h-3.5 w-3.5" wire:loading.remove wire:target="confirm" />
            <svg wire:loading wire:target="confirm" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
            {{ $confirmLabel }}
        </x-btn>
    </div>
</div>
