@props(['label', 'value', 'accent' => 'primary', 'foot' => null, 'footTrend' => null])

@php
    $accentVar = match ($accent) {
        'accent' => 'var(--color-accent)',
        'danger' => 'var(--color-danger)',
        'success' => 'var(--color-success)',
        'info' => 'var(--color-info)',
        default => 'var(--color-primary)',
    };
@endphp

<div class="stat-card" style="--stat-accent: {{ $accentVar }}">
    <span class="stat-card__notch stat-card__notch--left"></span>
    <span class="stat-card__notch stat-card__notch--right"></span>
    <div class="stat-card__label">{{ $label }}</div>
    <div class="stat-card__value">{{ $value }}</div>
    @if ($foot)
        <div class="stat-card__foot {{ $footTrend === 'up' ? 'stat-card__foot--up' : ($footTrend === 'down' ? 'stat-card__foot--down' : '') }}">
            {{ $foot }}
        </div>
    @endif
</div>