@props([
    'id' => 'area-' . uniqid(),
    'labels' => [],
    'datasets' => [], // Espera: label, values, color (hex)
])

<div clas="block">
    <div class="relative h-48 w-full">
        <canvas id="{{ $id }}"></canvas>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const ctx = document.getElementById('{{ $id }}').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: {{ Js::from($labels) }},
                datasets: {{ Js::from($datasets) }}.map(ds => ({
                    ...ds,
                    tension: 0.4, // Esto crea las curvas suaves de tu imagen
                    fill: true,   // Habilita el sombreado debajo de la línea
                    pointRadius: 0,
                    pointHoverRadius: 6,
                }))
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        enabled: true,
                        backgroundColor: '#ffffff',
                        titleColor: '#6b7280', // Color gris para el título
                        bodyColor: '#111827',  // Color oscuro para el valor
                        bodyFont: {
                            weight: 'bold',
                            size: 14
                        },
                        padding: 12,
                        borderColor: '#f3f4f6',
                        borderWidth: 1,
                        displayColors: false, // Quita el cuadradito de color
                        cornerRadius: 8,
                        callbacks: {
                            // Personaliza el texto dentro del tooltip
                            label: function(context) {
                                let label = context.dataset.label || '';
                                let value = context.parsed.y;
                                // Retorna un array para crear varias líneas (como en tu imagen)
                                return [
                                    label,
                                    `${value} días`
                                ];
                            },
                            title: function() {
                                return ''; // Eliminamos el título por defecto (fecha) si no lo quieres
                            }
                        }
                    },
                },
                scales: {
                    y: { 
                        display: false,
                        beginAtZero: true 
                    },
                    x: { 
                        grid: { display: false },
                        ticks: { color: '#9ca3af' }
                    }
                }
            }
        });
    });
</script>
@endpush