{{--
    Componente: stat-card
    Uso:
        <x-dashboard.stat-card
            value="32"
            label="Pending Orders"
            icon="far fa-gem"
            link-text="View all orders"
            link-url="{{ route('orders.index') }}"
        />
--}}

@props([
    'value'    => '0',
    'label'    => 'Stat',
    'icon'     => 'fa fa-chart-bar',
    'linkText' => 'View more',
    'linkUrl'  => '#',
])

<div class="block block-rounded d-flex flex-column h-100 mb-0">
    <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
            <dt class="fs-3 fw-bold">{{ $value }}</dt>
            <dd class="fs-sm fw-medium text-muted mb-0">{{ $label }}</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
            <i class="{{ $icon }} fs-3 text-primary"></i>
        </div>
    </div>
    <div class="bg-body-light rounded-bottom">
        <a class="block-content block-content-full block-content-sm fs-sm fw-medium d-flex align-items-center justify-content-between"
            href="{{ $linkUrl }}">
            <span>{{ $linkText }}</span>
            <i class="fa fa-arrow-alt-circle-right ms-1 opacity-25 fs-base"></i>
        </a>
    </div>
</div>