@props(['total' => null, 'active' => null, 'inactive' => null, 'cards' => null])

@php
    $onlyTotal = $active === null && $inactive === null;
@endphp

<div {{ $attributes->merge([
    'class' => 'catalog-summary'.($onlyTotal && $cards === null ? ' is-single' : ''),
    'aria-label' => 'Resumen del catálogo',
]) }}>
    @if ($cards !== null)
        @foreach ($cards as $card)
            <article class="catalog-summary-card {{ $card['tone'] ?? 'is-total' }}">
                <div class="catalog-summary-icon" aria-hidden="true">
                    <x-icon :name="$card['icon'] ?? 'list'" />
                </div>
                <div>
                    <p class="catalog-summary-label">{{ $card['label'] }}</p>
                    <p class="catalog-summary-value">{{ $card['value'] }}</p>
                    @if (! empty($card['sub']))
                        <p class="catalog-summary-sub">{{ $card['sub'] }}</p>
                    @endif
                </div>
            </article>
        @endforeach
    @else
        <article class="catalog-summary-card is-total">
            <div class="catalog-summary-icon" aria-hidden="true">
                <x-icon name="list" />
            </div>
            <div>
                <p class="catalog-summary-label">Total</p>
                <p class="catalog-summary-value">{{ $total }}</p>
                <p class="catalog-summary-sub">registros</p>
            </div>
        </article>
        @if (! $onlyTotal)
            <article class="catalog-summary-card is-success">
                <div class="catalog-summary-icon" aria-hidden="true">
                    <x-icon name="check" />
                </div>
                <div>
                    <p class="catalog-summary-label">Activos</p>
                    <p class="catalog-summary-value">{{ $active }}</p>
                    <p class="catalog-summary-sub">disponibles</p>
                </div>
            </article>
            <article class="catalog-summary-card is-muted">
                <div class="catalog-summary-icon" aria-hidden="true">
                    <x-icon name="pause" />
                </div>
                <div>
                    <p class="catalog-summary-label">Inactivos</p>
                    <p class="catalog-summary-value">{{ $inactive }}</p>
                    <p class="catalog-summary-sub">ocultos</p>
                </div>
            </article>
        @endif
    @endif
</div>