@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"
                role="img"
            ></canvas>
        </div>
    </div>
</div>