@props([
    'label' => '',
    'class' => '',
    'iconClass' => 'h-4 w-4',
    /** When null and no brand match: show monogram (React BrandAvatar parity). */
    'fallbackLucide' => null,
    'fallbackEmoji' => null,
    'title' => null,
])

@php
    $b = \App\Support\BrandResolver::resolve($label);
    $t = $title ?? $label;
    $smartEmoji = ($fallbackEmoji === null || $fallbackEmoji === '') && ! filled($fallbackLucide)
        ? \App\Support\LabelIntentIcon::emoji($label)
        : null;
@endphp

@if ($b && $b['kind'] === 'svg')
    <span
        class="flex items-center justify-center rounded-[inherit] border border-black/5 {{ $class }}"
        style="background-color: {{ $b['rgbaBg'] }}; color: {{ $b['fg'] }}"
        title="{{ $t }}"
    >
        <svg viewBox="0 0 24 24" aria-hidden="true" class="{{ $iconClass }}">
            <path d="{{ $b['path'] }}" fill="currentColor" />
        </svg>
    </span>
@elseif ($b && $b['kind'] === 'mono')
    <span
        class="flex items-center justify-center rounded-[inherit] border border-black/5 text-[10px] font-bold tracking-tight {{ $class }}"
        style="background-color: {{ $b['rgbaBg'] }}; color: {{ $b['color'] }}"
        title="{{ $t }}"
    >
        {{ $b['text'] }}
    </span>
@elseif ($fallbackEmoji)
    <span class="flex items-center justify-center rounded-[inherit] text-xl {{ $class }}" title="{{ $t }}">{{ $fallbackEmoji }}</span>
@elseif (filled($fallbackLucide))
    <span class="flex items-center justify-center rounded-[inherit] {{ $class }}" title="{{ $t }}">
        <i data-lucide="{{ $fallbackLucide }}" class="{{ $iconClass }}"></i>
    </span>
@elseif ($smartEmoji)
    <span class="flex items-center justify-center rounded-[inherit] text-xl {{ $class }}" title="{{ $t }}">{{ $smartEmoji }}</span>
@else
    <span
        class="flex items-center justify-center rounded-[inherit] border border-black/5 text-[10px] font-bold tracking-tight {{ $class }}"
        title="{{ $t }}"
    >
        {{ \App\Support\BrandResolver::monogram($label) }}
    </span>
@endif