@props([
    'label',
    'value',
    'color' => 'gray',
    'secondaryLabel' => null,
    'secondaryValue' => null,
    'url' => null,
])

@php
    $valueClasses = match ($color) {
        'primary' => 'text-primary-700 dark:text-primary-300',
        'success' => 'text-success-700 dark:text-success-300',
        'warning' => 'text-warning-700 dark:text-warning-300',
        'danger' => 'text-danger-700 dark:text-danger-300',
        'info' => 'text-info-700 dark:text-info-300',
        default => 'text-gray-950 dark:text-white',
    };

    $cardClasses = 'rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition dark:border-white/10 dark:bg-gray-900';
    $interactiveClasses = filled($url)
        ? ' hover:border-primary-300 hover:shadow-md dark:hover:border-primary-500/40'
        : '';
@endphp

@if (filled($url))
    <a href="{{ $url }}" class="{{ $cardClasses }}{{ $interactiveClasses }} group block">
@else
    <div class="{{ $cardClasses }}">
@endif
        <div class="text-sm text-gray-500 dark:text-gray-400">
            {{ $label }}
        </div>

        <div class="mt-2 text-lg font-semibold tabular-nums {{ $valueClasses }}">
            {{ $value }}
        </div>

        @if (filled($secondaryLabel) && filled($secondaryValue))
            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                {{ $secondaryLabel }}：<span class="font-medium tabular-nums text-gray-700 dark:text-gray-300">{{ $secondaryValue }}</span>
            </div>
        @endif

        @if (filled($url))
            <div class="mt-2 text-xs font-medium text-primary-600 opacity-0 transition group-hover:opacity-100 dark:text-primary-400">
                {{ __('dberp.widgets.workbench_shared.view') }}
            </div>
        @endif
@if (filled($url))
    </a>
@else
    </div>
@endif
