@props(['status'])

@php
    use App\Enums\TwoFactorStatus;

    [$variant, $textKey, $icon] = match ($status) {
        TwoFactorStatus::None            => ['secondary', 'security.2fa.state.none.badge',            'shield-off'],
        TwoFactorStatus::OptInActive     => ['success',   'security.2fa.state.opt_in_active.badge',    'shield-check'],
        TwoFactorStatus::EnforcedActive  => ['primary',   'security.2fa.state.enforced_active.badge',  'shield-lock'],
        TwoFactorStatus::EnforcedPending => ['warning',   'security.2fa.state.enforced_pending.badge', 'shield-alert'],
    };

    $colors = [
        'secondary' => ['#6b7280', '#f3f4f6'],
        'success'   => ['#065f46', '#d1fae5'],
        'primary'   => ['#1e40af', '#dbeafe'],
        'warning'   => ['#92400e', '#fef3c7'],
    ];
    [$fg, $bg] = $colors[$variant];
@endphp

<span class="badge badge-{{ $variant }}" data-icon="{{ $icon }}"
      style="display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.25;color:{{ $fg }};background:{{ $bg }};border:1px solid {{ $fg }};max-width:100%;white-space:normal;word-break:break-word;">
    @switch($icon)
        @case('shield-off')    <x-two-factor.icons.shield-off />    @break
        @case('shield-check')  <x-two-factor.icons.shield-check />  @break
        @case('shield-lock')   <x-two-factor.icons.shield-lock />   @break
        @case('shield-alert')  <x-two-factor.icons.shield-alert />  @break
    @endswitch
    <span style="min-width:0;">{{ __('two-factor.'.$textKey) }}</span>
</span>