@props(['sms'])

@php
    use App\Support\SmsDirection;

    $direction = SmsDirection::resolve($sms);

    $styles = match ($direction) {
        SmsDirection::SENT => ['bg' => '#dbeafe', 'color' => '#1d4ed8', 'label' => __('devices.sms.type_sent')],
        SmsDirection::RECEIVED => ['bg' => '#dcfce7', 'color' => '#15803d', 'label' => __('devices.sms.type_received')],
        default => ['bg' => '#f1f5f9', 'color' => '#475569', 'label' => __('devices.sms.type_unknown')],
    };
@endphp

<div {{ $attributes->merge(['class' => 'inline-flex items-center gap-1.5']) }} title="{{ $styles['label'] }}">
    <span class="inline-flex items-center justify-center rounded-full flex-shrink-0"
          style="width:1.75rem;height:1.75rem;background-color:{{ $styles['bg'] }};color:{{ $styles['color'] }}">
        @if($direction === SmsDirection::SENT)
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width:1rem;height:1rem" aria-hidden="true">
                <path d="M3.105 2.288a.75.75 0 00-.826.95l1.414 4.925A1.5 1.5 0 005.135 9.25h4.115a.75.75 0 010 1.5H5.135a3 3 0 01-2.716-1.923L1.005 3.762a2.25 2.25 0 011.9-2.765l12.482-2.237a.75.75 0 01.937.937L14.773 13.48a3 3 0 01-2.716 1.923H9.942a.75.75 0 110-1.5h2.115a1.5 1.5 0 001.35-.962l2.386-8.351-10.688 1.92z" />
            </svg>
        @elseif($direction === SmsDirection::RECEIVED)
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width:1rem;height:1rem" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.75 2.75a.75.75 0 00-1.5 0v9.19L7.03 9.72a.75.75 0 00-1.06 1.06l3.5 3.5a.75.75 0 001.06 0l3.5-3.5a.75.75 0 00-1.06-1.06l-2.22 2.22V2.75z" clip-rule="evenodd" />
            </svg>
        @else
            <span style="font-size:10px;font-weight:700">?</span>
        @endif
    </span>
    <span class="text-xs font-medium" style="color:{{ $styles['color'] }}">{{ $styles['label'] }}</span>
</div>