@props([
    'id'      => 'chart-'.uniqid(),
    'type'    => 'area',           // area | line | bar | donut | radialBar
    'series'  => [],
    'categories' => [],
    'colors'  => ['#6366f1', '#8b5cf6'],
    'height'  => 280,
    'options' => [],               // overrides arbitrarios
])

@php
    $config = array_replace_recursive([
        'chart' => [
            'type' => $type,
            'height' => $height,
            'toolbar' => ['show' => false],
            'fontFamily' => 'Inter, sans-serif',
            'foreColor' => '#64748b',
            'background' => 'transparent',
            'animations' => ['easing' => 'easeinout', 'speed' => 600],
        ],
        'colors' => $colors,
        'series' => $series,
        'xaxis' => [
            'categories' => $categories,
            'axisBorder' => ['show' => false],
            'axisTicks'  => ['show' => false],
            'labels'     => ['style' => ['colors' => '#64748b', 'fontSize' => '11px']],
        ],
        'yaxis' => [
            'labels' => ['style' => ['colors' => '#64748b', 'fontSize' => '11px']],
        ],
        'grid' => [
            'borderColor' => '#e2e8f0',
            'strokeDashArray' => 4,
            'padding' => ['left' => 0, 'right' => 0],
        ],
        'stroke' => ['curve' => 'smooth', 'width' => 2.5],
        'fill'   => ['type' => 'gradient', 'gradient' => ['shadeIntensity' => 1, 'opacityFrom' => 0.35, 'opacityTo' => 0, 'stops' => [0, 100]]],
        'dataLabels' => ['enabled' => false],
        'legend' => ['show' => false],
        'tooltip' => ['theme' => 'light', 'style' => ['fontSize' => '12px']],
        'theme' => ['mode' => 'light'],
    ], $options);
@endphp

<div id="{{ $id }}"></div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const el = document.querySelector('#{{ $id }}');
            if (!el || typeof ApexCharts === 'undefined') return;
            new ApexCharts(el, @json($config)).render();
        });
    </script>
@endpush