@props(['insights'])

<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">
        <h5 class="text-base font-semibold text-slate-800 dark:text-brand-charcoal-100 font-serif">
            <i class="uil uil-users-alt me-1.5 text-blue-500"></i>
            Customer Insights
        </h5>
        <h6 class="text-xs text-slate-450 dark:text-brand-charcoal-400 mt-0.5 font-medium">Customer base overview</h6>
    </div>

    <div class="grid grid-cols-2 gap-3">
        <div class="p-3 bg-slate-50 dark:bg-brand-charcoal-950/30 border border-slate-100 dark:border-brand-charcoal-800/40 rounded-xl text-center">
            <h4 class="text-xl font-bold text-slate-800 dark:text-brand-charcoal-100 font-serif">{{ number_format($insights['total']) }}</h4>
            <p class="text-[10px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mt-1">Total Customers</p>
        </div>
        <div class="p-3 bg-blue-50/50 dark:bg-blue-950/10 border border-blue-100 dark:border-blue-500/10 rounded-xl text-center">
            <h4 class="text-xl font-bold text-slate-800 dark:text-brand-charcoal-100 font-serif">{{ $insights['active_week'] }}</h4>
            <p class="text-[10px] font-bold tracking-widest text-blue-600 dark:text-blue-400 uppercase mt-1">Active This Week</p>
        </div>
        <div class="p-3 bg-emerald-50/50 dark:bg-brand-emerald-950/10 border border-emerald-100 dark:border-brand-emerald-500/10 rounded-xl text-center">
            <h4 class="text-xl font-bold text-slate-800 dark:text-brand-charcoal-100 font-serif">+{{ $insights['new_week'] }}</h4>
            <p class="text-[10px] font-bold tracking-widest text-emerald-600 dark:text-brand-emerald-400 uppercase mt-1">New This Week</p>
        </div>
        <div class="p-3 bg-amber-50/50 dark:bg-amber-950/10 border border-amber-100 dark:border-amber-500/10 rounded-xl text-center">
            <h4 class="text-xl font-bold text-slate-800 dark:text-brand-charcoal-100 font-serif">+{{ $insights['new_month'] }}</h4>
            <p class="text-[10px] font-bold tracking-widest text-amber-600 dark:text-amber-400 uppercase mt-1">New This Month</p>
        </div>
    </div>
</div>