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

@if(is_array($logs) && count($logs) > 0)
    <div class="overflow-x-auto w-full mb-7 border border-slate-200 rounded-xl">
        <table class="w-full text-left text-xs border-collapse">
            <thead>
                <tr class="bg-slate-100 border-b border-slate-200 text-slate-600 font-bold uppercase text-[10.5px]">
                    <th class="py-2.5 px-3.5">Timestamp</th>
                    <th class="py-2.5 px-3.5">Violation Category</th>
                    <th class="py-2.5 px-3.5">Audit Details</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-200 bg-white">
                @foreach($logs as $log)
                    <tr>
                        <td class="py-2.5 px-3.5 text-slate-500 font-mono text-[11px] whitespace-nowrap">
                            {{ isset($log['timestamp']) ? \Carbon\Carbon::parse($log['timestamp'])->format('H:i:s T') : '--:--:--' }}
                        </td>
                        <td class="py-2.5 px-3.5 font-bold text-slate-800 uppercase">
                            {{ str_replace('_', ' ', $log['type'] ?? 'Violation') }}
                        </td>
                        <td class="py-2.5 px-3.5 text-slate-600">
                            {{ $log['details'] ?? 'Incident flagged by proctoring engine.' }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@else
    <div class="bg-emerald-500/10 border border-emerald-500/25 text-emerald-700 px-4 py-3 rounded-xl text-xs font-semibold mb-7 flex items-center gap-2">
        <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
        <span>Zero proctoring violations or malpractice detected during the session.</span>
    </div>
@endif