@props([
    'title' => '',
    'value' => 0,
    'icon' => 'bx bx-trending-up',
    'color' => 'primary',
    'percentage' => null,
    'percentageType' => 'success',
    'link' => null,
    'linkText' => null
])

<div class="card card-animate">
    <div class="card-body">
        <div class="d-flex align-items-center">
            <div class="flex-grow-1 overflow-hidden">
                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ $title }}</p>
            </div>
            @if($percentage)
            <div class="flex-shrink-0">
                <h5 class="text-{{ $percentageType }} fs-14 mb-0">
                    <i class="ri-arrow-right-{{ $percentageType == 'success' ? 'up' : 'down' }}-line fs-13 align-middle"></i> {{ $percentage }}%
                </h5>
            </div>
            @endif
        </div>
        <div class="d-flex align-items-end justify-content-between mt-4">
            <div>
                <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                    <span class="counter-value" data-target="{{ $value }}">{{ $value }}</span>
                </h4>
                @if($link && $linkText)
                    <a href="{{ $link }}" class="text-decoration-underline text-muted">{{ $linkText }}</a>
                @endif
            </div>
            <div class="avatar-sm flex-shrink-0">
                <span class="avatar-title bg-{{ $color }}-subtle rounded fs-3">
                    <i class="{{ $icon }} text-{{ $color }}"></i>
                </span>
            </div>
        </div>
    </div>
</div>