@props([
    'title' => '',
    'value' => '',
    'subtitle' => '',
    'icon' => '',
    'color' => 'primary',
    'trend' => null,
    'trendValue' => null,
    'trendLabel' => null,
    'size' => 'default',
    'href' => null,
    'click' => null,
])

@php
    $bgColors = [
        'primary' => 'bg-primary',
        'success' => 'bg-success',
        'info' => 'bg-info',
        'warning' => 'bg-warning',
        'danger' => 'bg-danger',
        'light' => 'bg-light',
        'dark' => 'bg-dark',
    ];
    
    $isLight = $color === 'light';
    $bgClass = $bgColors[$color] ?? $bgColors['primary'];
    
    $sizeClasses = [
        'sm' => 'p-3',
        'default' => 'p-4',
        'lg' => 'p-5'
    ];
    
    $paddingClass = $sizeClasses[$size] ?? $sizeClasses['default'];
    $isInteractive = $href || $click;
@endphp

<div 
    {{ $attributes->merge([
        'class' => "lead-stat-widget card border-0 rounded-4 shadow-sm overflow-hidden {$paddingClass} {$bgClass}" . ($isInteractive ? ' cursor-pointer' : ''),
    ]) }}
    @if($click)
        x-on:click="{{ $click }}"
    @endif
>
    <div class="d-flex align-items-center justify-content-between {{ $isLight ? 'text-dark' : 'text-white' }}">
        <div class="flex-grow-1">
            @if($title)
                <div class="small fw-medium {{ $isLight ? 'text-muted' : 'opacity-75' }} mb-1">
                    {{ $title }}
                </div>
            @endif
            
            @if($value !== '')
                <div class="h3 fw-bold mb-0">
                    {{ $value }}
                </div>
            @endif
            
            @if($subtitle)
                <div class="small {{ $isLight ? 'text-muted' : 'opacity-75' }} mt-1">
                    {{ $subtitle }}
                </div>
            @endif
            
            @if($trend && $trendValue)
                <div class="mt-2">
                    <span class="badge {{ $isLight ? ($trend === 'up' ? 'bg-success' : 'bg-danger') : 'bg-white bg-opacity-25' }} rounded-pill">
                        <x-ui.nicon :name="$trend === 'up' ? 'arrow-up' : 'arrow-down'" class="me-1"/>
                        {{ $trendValue }}
                        @if($trendLabel)
                            <span class="ms-1 {{ $isLight ? '' : 'opacity-75' }}">{{ $trendLabel }}</span>
                        @endif
                    </span>
                </div>
            @endif
        </div>
        
        @if($icon)
            <div class="ms-3">
                <div class="d-flex align-items-center justify-content-center rounded-circle {{ $isLight ? 'bg-white' : 'bg-white bg-opacity-25' }}" style="width: 3.5rem; height: 3.5rem;">
                    <x-ui.nicon :name="$icon" class="fs-3"/>
                </div>
            </div>
        @endif
    </div>
    
    {{ $slot }}
</div>