// LineChart.tsx
import React from "react";
import Chart from "react-apexcharts";
import { ApexOptions } from "apexcharts";

interface Dataset {
  label: string;
  data: number[];
}

interface ChartData {
  labels: string[];
  datasets: Dataset[];
}

interface LineChartProps {
  data: ChartData;
}

const LineChart: React.FC<LineChartProps> = ({ data }) => {
  const options: ApexOptions = {
    chart: {
      type: "line", // Set as a specific string literal
      height: 350,
      toolbar: { show: false },
    },
    stroke: {
      curve: "smooth",
    },
    xaxis: {
      categories: data.labels,
    },
    yaxis: {
      title: {
        text: "Analytics",
      },
      min: 0,
    },
    title: {
      text: "User & Assignment Analytics",
      // text: "Revenue Comparison: September vs October",
      align: "center",
    },
    legend: {
      position: "top",
    },
    colors: ["#1D428A", "#152e61"],
  };

  const series = data.datasets.map((dataset) => ({
    name: dataset.label,
    data: dataset.data,
  }));

  return (
    <Chart
      options={options}
      series={series}
      type="line"
      height={window.innerWidth > 600 ? 350 : 200}
    />
  );
};

export default LineChart;