@props(['call'])

@php
    use App\Support\CallLogKind;

    $kind = CallLogKind::resolve($call);
    $duration = CallLogKind::formatDuration($call->duration !== null ? (int) $call->duration : null);

    $styles = match ($kind) {
        CallLogKind::OUTGOING => ['bg' => '#dbeafe', 'color' => '#1d4ed8', 'label' => __('devices.calls.type_outgoing')],
        CallLogKind::MISSED => ['bg' => '#fee2e2', 'color' => '#b91c1c', 'label' => __('devices.calls.type_missed')],
        CallLogKind::ANSWERED => ['bg' => '#dcfce7', 'color' => '#15803d', 'label' => __('devices.calls.type_answered')],
        default => ['bg' => '#f1f5f9', 'color' => '#475569', 'label' => __('devices.calls.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($kind === CallLogKind::OUTGOING)
            <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="M2 3.5A1.5 1.5 0 013.5 2h1.148a1.5 1.5 0 011.465 1.175l.716 3.223a1.5 1.5 0 01-1.052 1.78l-1.048.263a11.042 11.042 0 005.516 5.516l.263-1.048a1.5 1.5 0 011.78-1.052l3.223.716A1.5 1.5 0 0118 15.352V16.5a1.5 1.5 0 01-1.5 1.5H15c-7.18 0-13-5.82-13-13V4.5A1.5 1.5 0 012 3.5zm12.573 3.413a.75.75 0 10-1.06-1.06l-5.22 5.22 1.06 1.06 5.22-5.22z" clip-rule="evenodd" />
            </svg>
        @elseif($kind === CallLogKind::MISSED)
            <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="M2 3.5A1.5 1.5 0 013.5 2h1.148a1.5 1.5 0 011.465 1.175l.716 3.223a1.5 1.5 0 01-1.052 1.78l-1.048.263a11.042 11.042 0 005.516 5.516l.263-1.048a1.5 1.5 0 011.78-1.052l3.223.716A1.5 1.5 0 0118 15.352V16.5a1.5 1.5 0 01-1.5 1.5H15c-7.18 0-13-5.82-13-13V4.5A1.5 1.5 0 012 3.5zm3.92 9.44l4.5-4.5-1.06-1.06-4.5 4.5 1.06 1.06z" clip-rule="evenodd" />
            </svg>
        @elseif($kind === CallLogKind::ANSWERED)
            <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="M2 3.5A1.5 1.5 0 013.5 2h1.148a1.5 1.5 0 011.465 1.175l.716 3.223a1.5 1.5 0 01-1.052 1.78l-1.048.263a11.042 11.042 0 005.516 5.516l.263-1.048a1.5 1.5 0 011.78-1.052l3.223.716A1.5 1.5 0 0118 15.352V16.5a1.5 1.5 0 01-1.5 1.5H15c-7.18 0-13-5.82-13-13V4.5A1.5 1.5 0 012 3.5z" clip-rule="evenodd" />
            </svg>
        @else
            <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="M2 3.5A1.5 1.5 0 013.5 2h1.148a1.5 1.5 0 011.465 1.175l.716 3.223a1.5 1.5 0 01-1.052 1.78l-1.048.263a11.042 11.042 0 005.516 5.516l.263-1.048a1.5 1.5 0 011.78-1.052l3.223.716A1.5 1.5 0 0118 15.352V16.5a1.5 1.5 0 01-1.5 1.5H15c-7.18 0-13-5.82-13-13V4.5A1.5 1.5 0 012 3.5z" clip-rule="evenodd" />
            </svg>
        @endif
    </span>
    <span class="text-xs leading-tight min-w-0">
        <span class="font-medium" style="color:{{ $styles['color'] }}">{{ $styles['label'] }}</span>
        @if(in_array($kind, [CallLogKind::ANSWERED, CallLogKind::OUTGOING], true) && $duration)
            <span class="text-slate-500"> · {{ $duration }}</span>
        @endif
    </span>
</div>