@props([
    'title' => null,
    'subtitle' => null,
    'value' => null,
    'icon' => null,
    'color' => 'blue',
    'bordered' => false,
])

@php
    // 🎨 Colores seguros (Tailwind-safe)
    $colors = [
        'blue' => 'border-blue-500 bg-blue-50 text-blue-600',
        'yellow' => 'border-yellow-500 bg-yellow-50 text-yellow-600',
        'orange' => 'border-orange-500 bg-orange-50 text-orange-600',
        'green' => 'border-green-500 bg-green-50 text-green-600',
        'red' => 'border-red-500 bg-red-50 text-red-600',
        'gray' => 'border-gray-500 bg-gray-50 text-gray-600',
    ];

    $colorClass = $colors[$color] ?? $colors['blue'];
@endphp

<div {{ $attributes->merge([
    'class' => "rounded-2xl shadow-sm p-6 transition hover:shadow-md border-l-4 $colorClass"
]) }}>

    <div class="flex items-center justify-between">

        {{-- TEXTOS --}}
        <div>
            @if($title)
                <p class="text-sm text-gray-500 uppercase tracking-wide">
                    {{ $title }}
                </p>
            @endif

            @if(!is_null($value))
                <h2 class="text-3xl font-bold text-gray-800 mt-1">
                    {{ $value }}
                </h2>
            @endif

            @if($subtitle)
                <p class="text-xs text-gray-400 mt-1">
                    {{ $subtitle }}
                </p>
            @endif
        </div>

        {{-- ICONO --}}
        @if($icon)
            <div class="text-3xl">
                {{ $icon }}
            </div>
        @endif

    </div>

    {{-- SLOT EXTRA (opcional) --}}
    @if(trim($slot))
        <div class="mt-4">
            {{ $slot }}
        </div>
    @endif

    {{-- FOOTER --}}
    @isset($footer)
        <div class="mt-4 pt-3 border-t text-sm text-gray-500">
            {{ $footer }}
        </div>
    @endisset

</div>