@props([
    'href' => '#',
    'text' => '',
    'image' => null,
    'icon' => null,
    'title' => '',
    'backgroundColor' => '',
    'backgroundImg' => '',
])

<div class="card w-100 h-100">
    <a target="_blank" href="{{ $href }}" class="card card-flush h-100" @if($backgroundColor) style="background-color: {{ $backgroundColor }};  @endif  @if($backgroundImg)
                background-image: url('{{ $backgroundImg }}') !important;
                background-size: cover !important;
                background-repeat: repeat-x !important;
              @endif"
             >
        <div class="card-header pt-5 pb-5">
            <div class="card-title d-flex flex-column">
                <div class="d-flex align-items-center">
                    <span class="fs-2hx fw-bold text-light me-2 lh-1 ls-n2">{{ $text }}</span>
                </div>
                <span class="text-light pt-1 fw-semibold card-main-title">{{ $title }}</span>
            </div>

            <div class="card-title d-flex flex-column">
                @if ($icon)
                    {!! $icon !!}
                @elseif($image)
                    {!! $image !!}
                @endif
            </div>
        </div>
    </a>

</div>