import React, { useEffect, useRef } from "react";
import { Chart } from "chart.js/auto";

const AllLineChart = ({ datasets }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext("2d");
    const chartInstance = new Chart(ctx, {
      type: "line",
      data: {
        labels: ["월", "화", "수", "목", "금", "토", "일"],
        datasets: datasets,
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: "top",
          },
        },
        scales: {
          x: {
            display: true,
            title: {
              display: true,
              text: "요일",
            },
          },
          y: {
            display: true,
            title: {
              display: true,
              text: "점수",
            },
          },
        },
      },
    });

    return () => {
      chartInstance.destroy();
    };
  }, [datasets]);

  return <canvas ref={chartRef} />;
};

export default AllLineChart;