@props([
    'cards' => null,
    'icon' => 'fas fa-chart-bar',
    'title' => 'Judul Card',
    'value' => 0,
    'description' => 'Deskripsi Card',
    'color' => 'primary',
])

@php
    $colors = [
        'primary' => '#2563eb',
        'success' => '#16a34a',
        'warning' => '#d97706',
        'danger' => '#dc2626',
        'info' => '#0891b2',
    ];
@endphp

@if ($cards)
    <div class="row mb-3">
        @foreach ($cards as $key => $card)
            @php
                if (is_array($card)) {
                    $cTitle = $card['title'] ?? ucwords(str_replace('_', ' ', $key));
                    $cValue = $card['value'] ?? 0;
                    $cIcon = $card['icon'] ?? 'fas fa-chart-bar';
                    $cColor = $card['color'] ?? 'primary';
                    $cDesc = $card['description'] ?? 'Informasi Data';
                    $cColumn = $card['column'] ?? 'col-lg-3 col-md-6';
                } else {
                    $cTitle = ucwords(str_replace('_', ' ', $key));
                    $cValue = $card;
                    $cIcon = 'fas fa-chart-bar';
                    $cColor = 'primary';
                    $cDesc = 'Informasi Data';
                    $cColumn = 'col-md-3';
                }

                $mappedColor = str_starts_with($cColor, 'bg-') ? substr($cColor, 3) : $cColor;
                $theme = $colors[$mappedColor] ?? ($colors[$cColor] ?? '#2563eb');
            @endphp
            <div class="{{ $cColumn }} mb-3">
                <div class="card border-0 h-100 smart-horizontal-card shadow-sm"
                    style="
                        border-top: 4px solid {{ $theme }};
                        box-shadow: 0 8px 24px rgba(15,23,42,.06), 0 0 0 1px {{ $theme }}15;
                    ">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="pr-3">
                                <small class="text-muted text-uppercase font-weight-bold smart-card-title">
                                    {{ $cTitle }}
                                </small>
                                <h3 class="font-weight-bold mb-2 mt-2 smart-card-value">
                                    {{ number_format($cValue) }}
                                </h3>
                                <p class="text-muted mb-0 smart-card-description" style="font-size: 0.875rem;">
                                    {{ $cDesc }}
                                </p>
                            </div>
                            <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 smart-card-icon"
                                style="
                                    background: {{ $theme }}15;
                                    color: {{ $theme }};
                                    box-shadow: inset 0 0 0 1px {{ $theme }}25;
                                    width: 48px;
                                    height: 48px;
                                ">
                                <i class="{{ $cIcon }}" style="font-size: 20px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@else
    @php
        $mappedColor = str_starts_with($color, 'bg-') ? substr($color, 3) : $color;
        $theme = $colors[$mappedColor] ?? ($colors[$color] ?? '#2563eb');
    @endphp
    <div class="card border-0 h-100 smart-horizontal-card shadow-sm"
        style="
            border-top: 4px solid {{ $theme }};
            box-shadow: 0 8px 24px rgba(15,23,42,.06), 0 0 0 1px {{ $theme }}15;
        ">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-start">
                <div class="pr-3">
                    <small class="text-muted text-uppercase font-weight-bold smart-card-title">
                        {{ $title }}
                    </small>
                    <h3 class="font-weight-bold mb-2 mt-2 smart-card-value">
                        {{ number_format($value) }}
                    </h3>
                    <p class="text-muted mb-0 smart-card-description" style="font-size: 0.875rem;">
                        {{ $description }}
                    </p>
                </div>
                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 smart-card-icon"
                    style="
                        background: {{ $theme }}15;
                        color: {{ $theme }};
                        box-shadow: inset 0 0 0 1px {{ $theme }}25;
                        width: 48px;
                        height: 48px;
                    ">
                    <i class="{{ $icon }}" style="font-size: 20px;"></i>
                </div>
            </div>
            {{ $slot ?? '' }}
        </div>
    </div>
@endif