@props([
    'title',
    'value',
    'icon' => 'bi bi-bar-chart',
    'color' => 'primary',
])

<div class="card border-0 shadow-sm h-100">

    <div class="card-body">

        <div class="d-flex align-items-center justify-content-between">

            <div>

                <small class="text-muted d-block mb-1">

                    {{ $title }}

                </small>

                <h3 class="fw-bold mb-0">

                    {{ $value }}

                </h3>

            </div>

            <div
                class="rounded-circle d-flex align-items-center justify-content-center bg-{{ $color }} bg-opacity-10"
                style="width:60px; height:60px;">

                <i class="{{ $icon }} text-{{ $color }} fs-3"></i>

            </div>

        </div>

    </div>

</div>