{{--
  <x-deluxe-kpi-card icon="bi-fire" :value="$count" label="HOT pendientes" color="danger" :href="route(...)" :accent="true" />

  Props:
    - icon:   string — clase del icono (bi-*, fa-*, ki-*)
    - value:  string|int — número/texto destacado
    - label:  string — etiqueta uppercase pequeña
    - color:  string — bootstrap color (primary|danger|success|warning|info|secondary|dark)
    - href:   ?string — si está, la card es clickeable
    - accent: bool — si true, agrega border 2px del color (para destacar)
    - sublabel: ?string — segunda línea opcional bajo el label

  Pattern: command.blade.php líneas 64-122
--}}
@props([
    'icon' => 'bi-archive',
    'value' => '0',
    'label' => 'Total',
    'color' => 'gray-700',
    'href' => null,
    'accent' => false,
    'sublabel' => null,
])

@php
    $tag = $href ? 'a' : 'div';
    $attrs = $href ? "href=\"{$href}\" class=\"text-decoration-none\"" : '';
    $accentStyle = $accent
        ? "border: 2px solid var(--bs-{$color});"
        : 'border: 0;';
    $iconColor = in_array($color, ['gray-700', 'gray-600', 'secondary'], true) ? 'text-gray-700' : "text-{$color}";
    $valueColor = $accent ? "text-{$color}" : 'text-dark';
@endphp

<{!! $tag !!} {!! $attrs !!} class="card shadow-sm h-100 d-block {{ $href ? 'kpi-deluxe-link' : '' }}"
   style="border-radius: 12px; {{ $accentStyle }} transition: transform 0.15s ease, box-shadow 0.15s ease;">
    <div class="card-body p-3 text-center">
        <i class="{{ str_starts_with($icon, 'bi-') ? 'bi' : (str_starts_with($icon, 'ki-') ? 'ki-duotone' : 'fa-solid') }} {{ $icon }} {{ $iconColor }} fs-2x mb-1"></i>
        <div class="fw-bolder fs-2 lh-1 {{ $valueColor }}">{{ $value }}</div>
        <div class="text-gray-600 fs-9 fw-bold text-uppercase mt-1">{{ $label }}</div>
        @if($sublabel)
            <div class="text-gray-500 fs-9 mt-1">{{ $sublabel }}</div>
        @endif
    </div>
</{!! $tag !!}>

@once
    @push('styles')
        <style>
            .kpi-deluxe-link:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 18px rgba(0,0,0,0.07) !important;
            }
        </style>
    @endpush
@endonce