@props([
    'label',
    'value' => null,
    'icon' => null,
    'variant' => 'default',
    'meta' => null,
    'trendValue' => null,
    'trendLabel' => null,
    'trendDirection' => 'neutral',
])

@php
    $variant = in_array($variant, ['default', 'metric'], true) ? $variant : 'default';
    $trendDirection = in_array($trendDirection, ['up', 'down', 'neutral'], true) ? $trendDirection : 'neutral';
    $hasValue = $value !== null && $value !== '';
    $hasTrend = ($trendValue !== null && $trendValue !== '') || ($trendLabel !== null && $trendLabel !== '');
@endphp

<article {{ $attributes->class([
    'info-card',
    'info-card--metric' => $variant === 'metric',
]) }}>
    <div class="info-card-head">
        <span class="info-card-label">{{ $label }}</span>

        @if ($icon)
            <span class="info-card-icon" aria-hidden="true">
                <x-ui.icon :name="$icon" size="16" />
            </span>
        @endif
    </div>

    <div class="info-card-value" data-partial-placeholder="text">
        @if ($hasValue)
            {{ $value }}
        @else
            {{ $slot }}
        @endif
    </div>

    @if ($meta)
        <p class="info-card-meta" data-partial-placeholder="text">{{ $meta }}</p>
    @endif

    @if ($hasTrend)
        <x-ui.metric-trend
            class="info-card-trend"
            :direction="$trendDirection"
            :value="$trendValue"
            :label="$trendLabel"
            :compact="$variant === 'metric'"
            data-partial-placeholder="text"
        />
    @endif
</article>