@props(['title', 'description' => '', 'type' => 'line', 'config' => [], 'height' => 300, 'icon' => 'fa-chart-line'])

<div class="card wms-chart-card mb-4 h-100">
    <div class="card-header wms-chart-card__header">
        <div>
            <div class="wms-chart-card__eyebrow">Operational insight</div>
            <h3 class="wms-chart-card__title">
                <i class="fas {{ $icon }} me-2"></i>{{ $title }}
            </h3>
            @if ($description !== '')
                <p class="wms-chart-card__description">{{ $description }}</p>
            @endif
        </div>
    </div>

    <div class="card-body">
        <div class="wms-chart-card__canvas" style="height: {{ (int) $height }}px;">
            <canvas data-wms-chart data-chart-type="{{ $type }}" data-chart-config='@json($config)'
                aria-label="{{ $title }} chart"></canvas>
        </div>
    </div>
</div>