{{--
    Stat Card Component - shadcn-inspired
    
    Usage:
    <x-proxmox::ui.stat-card value="12" label="CPU %" />
    <x-proxmox::ui.stat-card value="8.5" suffix="GB" label="Memory" icon="ri-database-2-line" />
    <x-proxmox::ui.stat-card value="3" label="Servers" status="success" statusText="All active" />
--}}

@props([
    'value',
    'label',
    'suffix' => null,
    'prefix' => null,
    'icon' => null,
    'iconClass' => 'text-muted-foreground',
    'status' => null,
    'statusText' => null,
    'href' => null,
    'progress' => null,
    'progressColor' => 'bg-primary',
    'clickable' => false,
    'compact' => false,
    'change' => null,
    'changeLabel' => null,
])

@php
    $tag = $href ? 'a' : 'div';
    $statusClasses = [
        'success' => 'text-success',
        'warning' => 'text-warning',
        'danger' => 'text-danger',
        'info' => 'text-info',
        'muted' => 'text-muted-foreground',
    ];
    $statusClass = $statusClasses[$status] ?? '';
@endphp

<{{ $tag }}
    @if($href) href="{{ $href }}" @endif
    {{ $attributes->class([
        'rounded-xl border bg-card p-6 shadow-sm',
        'hover:bg-accent/50 transition-colors duration-150 cursor-pointer' => $href || $clickable,
    ]) }}
>
    <div class="flex items-center justify-between pb-2">
        <span class="text-sm font-medium text-muted-foreground">{{ $label }}</span>
        @if($icon)
            <x-dynamic-component :component="$icon" class="size-4 {{ $iconClass }}" />
        @endif
    </div>
    <div class="mt-1">
        <span @class(['font-bold tracking-tight', 'text-2xl' => !$compact, 'text-xl' => $compact])>
            @if($prefix)<span class="text-muted-foreground">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span class="text-muted-foreground text-base ml-1">{{ $suffix }}</span>@endif
        </span>
        @if($change !== null || $changeLabel)
            <p class="text-xs text-muted-foreground mt-1">
                @if($change !== null)
                    <span @class(['font-medium', $change >= 0 ? 'text-success' : 'text-danger'])>
                        {{ $change >= 0 ? '+' : '' }}{{ $change }}%
                    </span>
                @endif
                {{ $changeLabel ?? 'from last period' }}
            </p>
        @endif
    </div>
    
    @if($progress !== null)
        <div class="mt-4">
            <div class="h-1.5 w-full rounded-full bg-muted overflow-hidden">
                <div class="h-full {{ $progressColor }} rounded-full transition-all duration-150" style="width: {{ min(100, $progress) }}%"></div>
            </div>
        </div>
    @endif
    
    @if($statusText)
        <div class="border-t mt-4 pt-3 text-xs font-medium {{ $statusClass }}">
            {{ $statusText }}
        </div>
    @endif
</{{ $tag }}>