<?php
 
$unreadMessages = (int) ($data['unreadMessages'] ?? 0);
$totalMessages = (int) ($data['totalMessages'] ?? 0);
$pendingReports = (int) ($data['pendingReports'] ?? 0);
$totalReports = (int) ($data['totalReports'] ?? 0);
?>
<div class="space-y-3">
    
    <a href="/admin/inbox" class="block p-3 rounded-lg border <?= $unreadMessages > 0 ? 'border-blue-200 bg-blue-50/30' : 'border-gray-100 bg-gray-50/50' ?> hover:shadow-sm transition-all group">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg <?= $unreadMessages > 0 ? 'bg-blue-100' : 'bg-gray-100' ?> flex items-center justify-center">
                    <i class="fa-solid fa-envelope <?= $unreadMessages > 0 ? 'text-blue-500' : 'text-gray-400' ?> text-sm"></i>
                </div>
                <div>
                    <div class="text-sm font-semibold text-gray-800">Messages</div>
                    <div class="text-[10px] text-gray-400"><?= $totalMessages ?> total</div>
                </div>
            </div>
            <?php if ($unreadMessages > 0): ?>
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-blue-500 text-white"><?= $unreadMessages ?></span>
            <?php else: ?>
            <span class="text-xs text-gray-400">All read</span>
            <?php endif; ?>
        </div>
    </a>

    
    <a href="/admin/inbox" class="block p-3 rounded-lg border <?= $pendingReports > 0 ? 'border-red-200 bg-red-50/30' : 'border-gray-100 bg-gray-50/50' ?> hover:shadow-sm transition-all group">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg <?= $pendingReports > 0 ? 'bg-red-100' : 'bg-gray-100' ?> flex items-center justify-center">
                    <i class="fa-solid fa-flag <?= $pendingReports > 0 ? 'text-red-500' : 'text-gray-400' ?> text-sm"></i>
                </div>
                <div>
                    <div class="text-sm font-semibold text-gray-800">Reports</div>
                    <div class="text-[10px] text-gray-400"><?= $totalReports ?> total</div>
                </div>
            </div>
            <?php if ($pendingReports > 0): ?>
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-red-500 text-white"><?= $pendingReports ?></span>
            <?php else: ?>
            <span class="text-xs text-gray-400">All reviewed</span>
            <?php endif; ?>
        </div>
    </a>
</div>
