@props([
'title',
'number'=>'',
'route',
'otherClass'=>'text-success',
'color'=>'dark',
'icon'=>'money-bill-trend-up',
'otherText'=>'',
'otherNumber'=>'',
])

<div class="card shadow-secondary">
    <div class="card-header p-3 pt-2">
        <div class="icon icon-lg icon-shape bg-gradient-{{$color}} shadow-{{$color}} text-center mt-n4 position-absolute">
            <i class="fa-solid fa-{{$icon}}"></i>
        </div>
        <div class="text-end pt-1">
            <p class="text-sm mb-0">{{__("auth.$title")}}</p>
            <h4 class="mb-0">{{$number}}</h4>
        </div>
    </div>
    <hr class="dark horizontal my-0">
    <div class="card-footer p-3">
        <p class="mb-0">
            @if($otherNumber)<span class="{{$otherClass}} text-sm font-weight-bolder">{{$otherNumber}} </span> {{__("auth.$otherText")}}@endif
            <a href="{{$route}}" class="float-end text-decoration-none">{{__('auth.detail')}} <i class="fa-solid fa-arrow-right"></i></a>
        </p>
    </div>
</div>