@props([
    'initial' => '',
    'name' => '',
    'sub' => null,
    'accent' => 'emerald',
])

@php
    $avatarClass = $accent === 'amber'
        ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400'
        : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400';
@endphp

<div class="flex items-center">
    <div class="h-8 w-8 rounded-full {{ $avatarClass }} flex items-center justify-center font-bold text-xs uppercase shadow-sm shrink-0">{{ $initial }}</div>
    <div class="ml-3 leading-tight min-w-0 max-w-[140px]">
        <div class="font-semibold text-zinc-900 dark:text-zinc-200 truncate">{{ $name }}</div>
        @if ($sub !== null && $sub !== '')
            <div class="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5 truncate">{{ $sub }}</div>
        @endif
    </div>
</div>