@props([
    'label'   => '',
    'value'   => '',
    'delta'   => null,      // e.g. "+12.4%"
    'trend'   => null,      // "up" | "down" | null
    'icon'    => null,      // icon name from x-icon
    'hint'    => null,
])

@php
    $trendClass = match ($trend) {
        'up'   => 'is-positive',
        'down' => 'is-negative',
        default => '',
    };
@endphp

<article {{ $attributes->merge(['class' => 'dc-stat']) }}>
    <div class="d-flex align-items-start justify-content-between gap-2">
        <span class="dc-stat__label">{{ $label }}</span>
        @if ($icon)
            <span class="dc-text-muted"><x-icon :name="$icon" size="18" /></span>
        @endif
    </div>

    <div class="dc-stat__value dc-text-numeric">{{ $value }}</div>

    @if ($delta)
        <div class="dc-stat__delta {{ $trendClass }}">
            @if ($trend === 'up')   <x-icon name="chart" size="14" /> @endif
            @if ($trend === 'down') <x-icon name="chart" size="14" /> @endif
            <span>{{ $delta }}</span>
        </div>
    @endif

    @if ($hint)
        <div class="dc-text-muted" style="font-size: .8125rem;">{{ $hint }}</div>
    @endif
</article>