import React, { useEffect } from 'react';
import { Chart, registerables } from 'chart.js';

// Registra los módulos necesarios de Chart.js
Chart.register(...registerables);

const ChartComponent = ({ labels = [], datasets = [] }) => {
    useEffect(() => {
        // Asegúrate de que el canvas se renderice correctamente
        const ctx = document.getElementById("myChart").getContext("2d");

        // Crear los datos para el gráfico
        const data = {
            labels: labels,
            datasets: datasets.map(dataset => ({
                label: dataset.label,
                borderColor: dataset.borderColor,
                data: dataset.data,
                fill: dataset.fill
            }))
        };

        // Crear el gráfico
        const myLineChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: {
                scales: {
                    x: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'X'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Y'
                        }
                    }
                }
            }
        });

        // Limpieza del gráfico cuando el componente se desmonte
        return () => myLineChart.destroy();
    }, [labels, datasets]); // Re-renderiza el gráfico cuando cambien los datos

    return <canvas id="myChart" width="400" height="200"></canvas>;
};

export default ChartComponent;