@props(['products'])

<div class="bg-white dark:bg-brand-charcoal-900 border border-slate-200 dark:border-brand-charcoal-800 rounded-xl p-5 shadow-sm select-none">
    <div class="mb-4 flex items-center justify-between">
        <div>
            <h5 class="text-base font-semibold text-slate-800 dark:text-brand-charcoal-100 font-serif">
                <i class="uil uil-star me-1.5 text-amber-500"></i>
                Top Products
            </h5>
            <h6 class="text-xs text-slate-450 dark:text-brand-charcoal-400 mt-0.5 font-medium">Best sellers this week</h6>
        </div>
    </div>

    <div class="space-y-2">
        @forelse($products as $i => $p)
            <div class="flex items-center gap-3 p-2.5 rounded-xl bg-slate-50 dark:bg-brand-charcoal-950/30 border border-slate-100 dark:border-brand-charcoal-800/40">
                <span class="flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold
                    @if($i === 0) bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400
                    @elseif($i === 1) bg-slate-200 text-slate-600 dark:bg-brand-charcoal-800 dark:text-brand-charcoal-300
                    @elseif($i === 2) bg-orange-100 text-orange-700 dark:bg-orange-950/20 dark:text-orange-400
                    @else bg-slate-100 text-slate-500 dark:bg-brand-charcoal-900 dark:text-brand-charcoal-400 @endif">
                    {{ $i + 1 }}
                </span>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-slate-800 dark:text-brand-charcoal-150 truncate">{{ $p['name'] }}</p>
                    <p class="text-[10px] text-slate-400 dark:text-brand-charcoal-500 font-medium">{{ $p['quantity'] }} sold</p>
                </div>
                <div class="text-right flex-shrink-0">
                    <span class="text-sm font-bold text-slate-800 dark:text-brand-charcoal-100 font-serif">${{ number_format($p['total'], 0) }}</span>
                </div>
            </div>
        @empty
            <div class="text-center py-8">
                <i class="uil uil-box text-3xl text-slate-400 dark:text-brand-charcoal-500 mb-2 block"></i>
                <p class="text-sm font-semibold text-slate-600 dark:text-brand-charcoal-300">No sales this week</p>
                <small class="text-xs text-slate-450 dark:text-brand-charcoal-500 mt-1 block">Products will appear here as orders are placed</small>
            </div>
        @endforelse
    </div>
</div>