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

@php
    $tabSwitches = $metrics['tab_switches'] ?? 0;
    $focusLosses = $metrics['focus_lost'] ?? 0;
    $gazeAnomalies = $metrics['gaze_alerts'] ?? 0;
    $pasteEvents = $metrics['paste_events'] ?? 0;
    $lowerGaze = $metrics['lower_gaze'] ?? 0;
    $questionRepeat = $metrics['question_repeat'] ?? 0;
@endphp

<div class="font-outfit text-base font-bold text-slate-900 mb-3 flex items-center gap-2">
    🔍 Behavioral Audit & Proctoring Incident Breakdown
</div>

<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-2.5 mb-5">
    <div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
        <div class="text-lg font-extrabold text-red-500">{{ $tabSwitches }}</div>
        <div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">Tab Switches</div>
    </div>
    <div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
        <div class="text-lg font-extrabold text-amber-500">{{ $focusLosses }}</div>
        <div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">Focus Lost</div>
    </div>
    <div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
        <div class="text-lg font-extrabold text-sky-500">{{ $gazeAnomalies }}</div>
        <div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">Gaze Anomalies</div>
    </div>
    <div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
        <div class="text-lg font-extrabold text-indigo-500">{{ $pasteEvents }}</div>
        <div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">Code Pastes</div>
    </div>
    <div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
        <div class="text-lg font-extrabold text-red-500">{{ $lowerGaze }}</div>
        <div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">📱 Lower Gaze</div>
    </div>
    <div class="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-center">
        <div class="text-lg font-extrabold text-rose-500">{{ $questionRepeat }}</div>
        <div class="text-[10px] text-slate-500 font-bold uppercase mt-0.5">🗣️ Question Repeat</div>
    </div>
</div>