@props([
    'label',
    'value',
    'change' => null,
    'changeDirection' => 'up',
    'changePeriod' => '',
    'icon' => 'fas fa-chart-line',
    'color' => 'blue',
    'link' => null,
    'sparkId' => null,
])

<div class="kpi-card" @if($link) onclick="window.location='{{ $link }}'" style="cursor:pointer;" @endif>
    <div class="kpi-card-header">
        <div class="kpi-icon {{ $color }}"><i class="{{ $icon }}"></i></div>
        <span class="kpi-label">{{ $label }}</span>
    </div>
    <p class="kpi-value">{{ $value }}</p>
    @if($change)
        <p class="kpi-change {{ $changeDirection }}">
            <i class="fas fa-arrow-{{ $changeDirection }}"></i>
            {{ $change }} {{ $changePeriod }}
        </p>
    @endif
    @if($sparkId)
        <div class="kpi-sparkline"><canvas id="{{ $sparkId }}"></canvas></div>
    @endif
</div>