@props(['label', 'value', 'icon' => 'activity', 'tone' => 'primary', 'delta' => null, 'deltaUp' => true, 'hint' => null])

@php
    // Per-metric accent so a dashboard row isn't a sea of one colour.
    $tones = [
        'primary' => 'var(--color-primary-700)',
        'info'    => 'var(--state-info-fg)',
        'success' => 'var(--state-success-fg)',
        'warning' => 'var(--state-warning-fg)',
        'danger'  => 'var(--state-danger-fg)',
        'refund'  => 'var(--state-refund-fg)',
        'active'  => 'var(--color-primary-700)',
    ];
    $accent = $tones[$tone] ?? $tones['primary'];
@endphp

<div class="rf-kpi">
    <div class="mb-3 flex items-center justify-between">
        <span class="rf-panel-heading">{{ $label }}</span>
        <span class="flex h-8 w-8 items-center justify-center rounded-lg"
              style="background:color-mix(in oklab, {{ $accent }} 14%, var(--color-surface));color:{{ $accent }};">
            <i data-lucide="{{ $icon }}" style="width:16px;height:16px;"></i>
        </span>
    </div>
    <div class="rf-kpi-value">{{ $value }}</div>
    @if ($delta !== null)
        <div class="mt-1 flex items-center gap-1 text-xs" style="color:{{ $deltaUp ? 'var(--state-success-fg)' : 'var(--state-danger-fg)' }};">
            <i data-lucide="{{ $deltaUp ? 'trending-up' : 'trending-down' }}" style="width:13px;height:13px;"></i>
            <span class="tabular">{{ $delta }}</span>
            @if ($hint)<span style="color:var(--color-text-subtle);">{{ $hint }}</span>@endif
        </div>
    @elseif ($hint)
        <div class="mt-1 text-xs" style="color:var(--color-text-subtle);">{{ $hint }}</div>
    @endif
</div>