@props([
    'title',
    'subtitle' => '',
    'kicker' => '',
    'chartId' => null,
    'height' => '280px',
    'bodyClass' => '',
    'comingSoon' => false,
    'comingSoonNote' => '',
])

<div {{ $attributes->merge(['class' => 'mec-chart-panel']) }}>
    <div class="mec-chart-panel__head">
        @if($kicker !== '')
            <div class="mec-chart-panel__kicker">{{ $kicker }}</div>
        @endif
        <h3 class="mec-chart-panel__title">{{ $title }}</h3>
        @if($subtitle !== '')
            <p class="mec-chart-panel__subtitle">{{ $subtitle }}</p>
        @endif
    </div>
    <div class="mec-chart-panel__body {{ $bodyClass }}">
        @if($comingSoon)
            <div class="mec-chart-coming-soon" style="min-height: {{ $height }};">
                <div class="mec-chart-coming-soon__badge">Coming Soon</div>
                @if($comingSoonNote !== '')
                    <p class="mec-chart-coming-soon__note">{{ $comingSoonNote }}</p>
                @endif
            </div>
        @elseif($chartId)
            <div class="mec-chart-slot" data-chart-id="{{ $chartId }}" style="height: {{ $height }};"></div>
        @else
            {{ $slot }}
        @endif
    </div>
</div>