@props([
    'direction' => 'neutral',
    'value' => null,
    'label' => null,
    'tone' => null,
    'icon' => null,
    'compact' => false,
])

@php
    $direction = in_array($direction, ['up', 'down', 'neutral'], true) ? $direction : 'neutral';
    $tone = $tone ?: match ($direction) {
        'up' => 'positive',
        'down' => 'negative',
        default => 'neutral',
    };
    $tone = in_array($tone, ['positive', 'negative', 'neutral'], true) ? $tone : 'neutral';
    $icon = $icon ?: match ($direction) {
        'up' => 'trend-up',
        'down' => 'trend-down',
        default => 'minus',
    };
@endphp

<span {{ $attributes->class([
    'ui-metric-trend',
    'ui-metric-trend--'.$tone,
    'ui-metric-trend--compact' => $compact,
]) }}>
    <x-ui.icon :name="$icon" size="13" />
    @if ($value !== null && $value !== '')
        <strong>{{ $value }}</strong>
    @endif
    @if ($label !== null && $label !== '')
        <span>{{ $label }}</span>
    @endif
    {{ $slot }}
</span>