@props([
    'chartId' => 'chart-' . uniqid(),
    'type' => 'line',
    'height' => 300,
    'data' => [],
    'title' => null,
    'subtitle' => null,
])

<div
    {{ $attributes->merge(['class' => 'chart-container card border-0 shadow-sm rounded-4']) }}
    x-data="{
        chart: null,
        init() {
            this.$nextTick(() => {
                this.initChart();
            });
        },
        initChart() {
            const canvas = this.$refs.canvas;
            if (!canvas) return;
            
            const ctx = canvas.getContext('2d');
            if (!ctx) return;
            
            const chartData = @js($data);
            
            // Destroy existing chart if any
            if (this.chart) {
                this.chart.destroy();
                this.chart = null;
            }
            
            if (typeof Chart !== 'undefined') {
                this.chart = new Chart(ctx, {
                    type: @js($type),
                    data: chartData,
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        },
        destroy() {
            if (this.chart) {
                this.chart.destroy();
                this.chart = null;
            }
        }
    }"
>
    @if($title || $subtitle)
        <div class="card-header bg-transparent border-0 pb-0">
            @if($title)
                <h6 class="mb-1">{{ $title }}</h6>
            @endif
            @if($subtitle)
                <p class="text-muted small mb-0">{{ $subtitle }}</p>
            @endif
        </div>
    @endif
    
    <div class="card-body">
        <div class="chart-wrapper" style="height: {{ $height }}px;">
            <canvas x-ref="canvas" id="{{ $chartId }}"></canvas>
        </div>
    </div>
    
    {{ $slot }}
</div>