@props([
    'blocker',          // ['type','message','cta','section','count']
    'primary' => false, // render as the prominent next-action button
])

@php
    [$icon, $variant] = match ($blocker['type']) {
        'required' => ['asterisk', 'danger'],
        'review'   => ['lightbulb-on-outline', 'warning'],
        'conflict' => ['alert-octagon-outline', 'danger'],
        default    => ['information-outline', 'secondary'],
    };
    // goToBlocker(section) — a review blocker has no section, the action resolves one.
    $arg = $blocker['section'] ? "'".$blocker['section']."'" : 'null';
@endphp

@if($primary)
    <button type="button" class="btn btn-{{ $variant }} w-100 text-start d-flex align-items-center gap-2"
            wire:click="goToBlocker({{ $arg }})">
        <span class="mdi mdi-{{ $icon }}" aria-hidden="true"></span>
        <span class="flex-grow-1">{{ $blocker['cta'] }}</span>
        <span class="mdi mdi-arrow-right" aria-hidden="true"></span>
    </button>
@else
    <li class="d-flex align-items-center gap-2 py-1">
        <span class="mdi mdi-{{ $icon }} text-{{ $variant }}" aria-hidden="true"></span>
        <span class="small flex-grow-1">{{ $blocker['message'] }}</span>
        <button type="button" class="btn btn-sm btn-link p-0" wire:click="goToBlocker({{ $arg }})">Fix</button>
    </li>
@endif