@include('admin.subscription.partials.data')

<div class="space-y-4">
    @foreach ($usageLimits as $limit)
        @php
            $allowed = $limit['allowed'] ?? null;
            $percent = $limit['percent'] ?? ($allowed ? min(100, round(($limit['used'] / $allowed) * 100)) : 0);
            $allowedDisplay = $limit['allowed_display'] ?? ($allowed ? number_format($allowed) : 'Unlimited');
        @endphp
        <div class="rounded-lg border border-booklio-border bg-white p-4 shadow-soft">
            <div class="mb-2 flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm font-extrabold text-booklio-dark">{{ $limit['label'] }}</p>
                    <p class="mt-1 text-xs font-semibold text-booklio-muted">{{ number_format($limit['used']) }} of {{ $allowedDisplay }} used</p>
                </div>
                <span class="text-sm font-extrabold text-booklio-primary">{{ $allowed ? $percent.'%' : 'Unlimited' }}</span>
            </div>
            <div class="h-3 rounded-full bg-slate-100">
                <div class="h-3 rounded-full {{ $percent > 85 ? 'bg-amber-500' : 'bg-booklio-primary' }}" style="width: {{ $percent }}%"></div>
            </div>
            <p class="mt-2 text-xs font-semibold text-booklio-muted">{{ $limit['note'] }}</p>
        </div>
    @endforeach
</div>