@props(['contact', 'badge' => true, 'label' => null])

@php
    $bg = ['whatsapp' => 'bg-green-600', 'messenger' => 'bg-blue-600', 'instagram' => 'bg-pink-600'][$contact->channel] ?? 'bg-slate-500';
    $initialSource = $label ?: $contact->displayName();
@endphp

<span class="relative inline-flex shrink-0">
    @if ($contact->profile_pic)
        <img src="{{ $contact->profile_pic }}" alt=""
             {{ $attributes->merge(['class' => 'shrink-0 rounded-full object-cover']) }}
             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
        <span {{ $attributes->merge(['class' => 'avatar '.$bg]) }} style="display:none">
            {{ mb_strtoupper(mb_substr($initialSource, 0, 1)) }}
        </span>
    @else
        <span {{ $attributes->merge(['class' => 'avatar '.$bg]) }}>
            {{ mb_strtoupper(mb_substr($initialSource, 0, 1)) }}
        </span>
    @endif
    @if ($badge)
        <span class="absolute -right-0.5 -bottom-0.5 flex size-4 items-center justify-center rounded-full bg-slate-200 shadow-sm"
              title="{{ $contact->channelLabel() }}">
            <x-channel-icon :channel="$contact->channel" class="size-2.5" />
        </span>
    @endif
</span>