@props([
    'label' => null, 
    'value' => null, 
    'icon', 
    'color' => 'info', 
    'id' => null, 
    'url' => null,
    'style' => 'flat', // 'flat' (horizontal) o 'small' (vertical)
    'vibrant' => true,   // Si es true, el fondo de toda la card tendrá el color
    'alpineValue' => null // Variable de Alpine.js para x-text (usar alpine-value="expr")
])

@php
    $xValue = $alpineValue ?? null;
@endphp

@php
    $bgClass = $vibrant ? "bg-$color" : "";
    $iconBgClass = $vibrant ? "" : "bg-$color";
    $textColor = $vibrant ? "text-white" : "";
@endphp

@if($style === 'flat')
    {{-- ESTILO HORIZONTAL (Vibrante o Sobrio) --}}
    <div {{ $attributes->merge(['class' => "info-box $bgClass shadow-sm mb-3 $textColor", 'id' => $id]) }}>
        <span class="info-box-icon {{ $iconBgClass }}">
            <i class="{{ $icon }}"></i>
        </span>
        <div class="info-box-content">
            @if($label) <span class="info-box-text font-weight-bold">{{ $label }}</span> @endif
            @if($value) <span class="info-box-number h4 mb-0" {!! $xValue ? "x-text='$xValue'" : "" !!}>{{ $value }}</span> @endif
            {{ $slot }}
            @if($url)
                <a href="{{ $url }}" class="small-box-footer mt-1" style="font-size: 10px; color: inherit; text-decoration: underline;">
                    Ver más <i class="fas fa-arrow-right"></i>
                </a>
            @endif
        </div>
    </div>
@else
    {{-- ESTILO SMALL-BOX (Grande) --}}
    <div {{ $attributes->merge(['class' => "small-box bg-$color shadow-sm hover-effect", 'id' => $id]) }}>
        <div class="inner">
            @if($value) <h3 {!! $xValue ? "x-text='$xValue'" : "" !!}>{{ $value }}</h3> @endif
            @if($label) <p>{{ $label }}</p> @endif
            {{ $slot }}
        </div>
        <div class="icon">
            <i class="{{ $icon }}"></i>
        </div>
        @if($url)
            <a href="{{ $url }}" class="small-box-footer">
                Ver más <i class="fas fa-arrow-circle-right"></i>
            </a>
        @else
            <div class="small-box-footer" style="height: 20px;"></div>
        @endif
    </div>
@endif