{{-- Reusable chart card component with skeleton loader --}}
@props([
    'chartId',
    'title',
    'icon'   => 'bi-bar-chart-fill',
    'height' => '300px',
])

<div class="chart-card">
    <div class="chart-card-header">
        <i class="bi {{ $icon }} chart-icon"></i>
        <span class="chart-title">{{ $title }}</span>
    </div>

    {{-- Skeleton shown while AJAX loads --}}
    <div class="skeleton-loader" id="skeleton-{{ $chartId }}">
        <div class="skeleton-bar" style="height: 12px; width: 60%; margin-bottom: 12px;"></div>
        <div class="skeleton-bar" style="height: {{ $height }};"></div>
    </div>

    {{-- Chart rendered here by ApexCharts JS --}}
    <div id="{{ $chartId }}" style="min-height: {{ $height }}; display:none;"></div>
</div>