@props(['type' => 'line', 'id', 'data', 'options' => [], 'height' => '300px', 'width' => '100%'])

@php
    $chartId = $id ?? 'chart-' . uniqid();
    $chartData = json_encode($data);
    $chartOptions = json_encode($options);
@endphp

<div style="height: {{ $height }}; width: {{ $width }};">
    <canvas id="{{ $chartId }}"></canvas>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('{{ $chartId }}').getContext('2d');
        const chartData = @json($data);
        const chartOptions = @json($options);
        
        new Chart(ctx, {
            type: '{{ $type }}',
            data: chartData,
            options: chartOptions
        });
    });
</script>