@props(['title', 'value' => 0, 'delta' => 0, 'trend' => 'stable', 'format' => 'number', 'hint' => null])

@php
    $formatted = match($format) {
        'currency' => '$' . number_format((float) $value, 2),
        'percent' => number_format((float) $value, 1) . '%',
        default => number_format((float) $value),
    };
    $deltaAbs = number_format(abs((float) $delta), 1);
    $badgeClass = $trend === 'up' ? 'badge-phoenix-success' : ($trend === 'down' ? 'badge-phoenix-danger' : 'badge-phoenix-secondary');
    $icon = $trend === 'up' ? 'fa-caret-up' : ($trend === 'down' ? 'fa-caret-down' : 'fa-minus');
@endphp

<div class="card h-100">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <h6 class="text-body-tertiary mb-1">{{ $title }}</h6>
                <h3 class="mb-0">{{ $formatted }}</h3>
                @if($hint)
                    <small class="text-body-secondary">{{ $hint }}</small>
                @endif
            </div>
            <span class="badge badge-phoenix {{ $badgeClass }} align-self-start">
                <span class="fas {{ $icon }} me-1"></span>{{ $deltaAbs }}%
            </span>
        </div>
    </div>
</div>