@props([
    'metrics' => [],
])

@php
    $tabSwitches = $metrics['tab_switches'] ?? 0;
    $focusLost = $metrics['focus_lost'] ?? 0;
    $gazeAlerts = $metrics['gaze_alerts'] ?? 0;
    $lowerGaze = $metrics['lower_gaze'] ?? 0;
    $questionRepeat = $metrics['question_repeat'] ?? 0;
    $externalAi = $metrics['external_ai'] ?? 0;
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col gap-0.5 text-xs']) }}>
    <span class="{{ $tabSwitches > 0 ? 'text-red-400 font-bold' : 'text-slate-400' }}">
        <i class="fa-solid fa-circle text-[0.5rem] mr-1 text-red-500"></i> Tab Switches: {{ $tabSwitches }}
    </span>
    <span class="{{ $focusLost > 0 ? 'text-amber-400 font-semibold' : 'text-slate-400' }}">
        <i class="fa-solid fa-circle text-[0.5rem] mr-1 text-amber-500"></i> Focus Loss / Overlay: {{ $focusLost }}
    </span>
    <span class="{{ $gazeAlerts > 0 ? 'text-rose-400 font-semibold' : 'text-slate-400' }}">
        <i class="fa-solid fa-eye mr-1"></i> Eye Gaze Anomaly: {{ $gazeAlerts }}
    </span>
    @if($lowerGaze > 0)
        <span class="text-red-400 font-bold">
            <i class="fa-solid fa-mobile-screen mr-1"></i> Lower Gaze (>10s): {{ $lowerGaze }}
        </span>
    @endif
    @if($questionRepeat > 0)
        <span class="text-rose-400 font-bold">
            <i class="fa-solid fa-comments mr-1"></i> Question Repetition: {{ $questionRepeat }}
        </span>
    @endif
    @if($externalAi > 0)
        <span class="text-red-400 font-extrabold bg-red-500/20 px-1.5 py-0.5 rounded">
            <i class="fa-solid fa-robot mr-1"></i> Parakeet / External AI: {{ $externalAi }}
        </span>
    @endif
</div>