@props([
'title',
'value',
'trendClass',
'trendIcon',
'trendText',
'borderColor',
'bgColor',
'icon',
'iconColor',
'href' => null
])
<style>
    @media (min-width: 600px) {
        /* .card.item{
            border-top: 4px solid
    {{ $borderColor }} !important;
        } */
    }
</style>

    {{--    <div class="card h-100 item" style="border-left: 4px solid {{ $borderColor }};">--}}
    <div class="card item mb-4" style="border-left: 2px solid {{ $borderColor }};background: {{ $bgColor ?? '#fff' }};">
        <div class="card-body">
            @if ($href)
                <a href="{{ $href }}" class="text-decoration-none">
                    @endif
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="card__title text-gray-900 mb-2">{{ $title }}</div>
                            <div class="h4 mb-0 text-gray-900">{{ $value }}</div>
                            <div class="mt-3 mb-0 text-muted txt__info text-xs">
                                <span class="{{ $trendClass }} mr-2"></span>
                                <span>{{ $trendText }}</span>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="{{ $icon }} {{ $iconColor }}"></i>
                        </div>
                    </div>
                    @if ($href)
                </a>
            @endif
        </div>
    </div>



