import React, { useEffect, useRef, useState } from "react";
import ReactApexChart from "react-apexcharts";

const AreaChart: React.FC = () => {
  const chartRef = useRef<any>(null); // Ref for the chart component
  const [options, setOptions] = useState<any>({
    chart: {
      type: "area",
      toolbar: {
        show: false, // Disable the toolbar
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "smooth",
    },
    xaxis: {
      type: "text",
      categories: [
        "كانون الثاني",
        "شباط",
        "آذار",
        "نيسان",
        "أيار",
        "حزيران",
        "تموز",
      ],
    },
    tooltip: {
      x: {
        format: "عدد الطلاب في الصفوف",
      },
    },
  });
  const [series, setSeries] = useState<any>([
    {
      name: "الصف الاول",
      data: [31, 40, 28, 51, 42, 109, 100],
      color: "#FCC43E",
    },
    {
      name: "الصف الثاني ",
      data: [11, 32, 45, 32, 34, 52, 41],
      color: "#FB7D5B",
    },
    {
      name: "الصف الثالث ",
      data: [21, 12, 35, 22, 14, 22, 1],
      color: "#9dfb2b",
    },
  ]);

  return (
    <div className="AreaChart">
      <div id="chart">
        <ReactApexChart
          options={options}
          series={series}
          type="area"
          className="ReactApexChartArea"
          height={400}
        />
      </div>
      <div id="html-dist"></div>
    </div>
  );
};

export default AreaChart;
