@props([
    'icon' => '',
    'title' => '',
    'items' => [],
    'url' => null
])

<a {{ $attributes->merge(['class' => 'card card-bordered featured-card h-100', 'href' => $url]) }}>
    <div class="card-inner">
        @if($icon)
        <div class="d-flex justify-content-between align-items-center">
            <div class="loan-icon h-75px w-20 me-2">
                @svg($icon)
            </div>
            @if($items)
            <ul class="list-styled">
                @foreach($items as $i => $item)
                <li class="list-item mb-1 d-flex justify-between align-items-center">
                    <div class="list-item-label">{{ data_get($item, 'label') }}</div>
                    <div>
                        <span class="badge rounded-pill badge-dim bg-{{ data_get($item, 'color') ?: ($i == 1? 'info' : 'primary') }} ms-3">
                            {{ data_get($item, 'count') }}
                        </span>
                    </div>
                </li>
                @endforeach
            </ul>
            @endif
        </div>
        @endif
        @if($title)
        <h5 class="card-title mt-2">{{ $title }}</h5>
        @endif
        <div class="featured-action">
            <x-ui.nicon name="arrow-long-right"/>
        </div>
    </div>
</a>