"use client";

import React, { useMemo } from "react";
import { AgCharts } from "ag-charts-react";
import { AgChartOptions } from "ag-charts-community";

interface ChartData {
  label: string;
  value: number;
  color?: string;
}

interface UserGrowthChartProps {
  data: ChartData[];
  title?: string;
}

export function UserGrowthChart({
  data,
  title = "User Growth",
}: UserGrowthChartProps) {
  const chartOptions: AgChartOptions = useMemo(
    () => ({
      title: {
        text: title,
        fontSize: 18,
        fontWeight: "bold",
      },
      data,
      series: [
        {
          type: "line",
          xKey: "label",
          yKey: "value",
          stroke: "#3b82f6",
          strokeWidth: 3,
          marker: {
            size: 6,
            fill: "#3b82f6",
            stroke: "#ffffff",
            strokeWidth: 2,
          },
          highlightStyle: {
            item: {
              fill: "#1d4ed8",
              stroke: "#ffffff",
              strokeWidth: 2,
            },
          },
        },
      ],
      axes: [
        {
          type: "category",
          position: "bottom",
          title: {
            text: "Time Period",
            fontSize: 14,
          },
        },
        {
          type: "number",
          position: "left",
          title: {
            text: "Number of Users",
            fontSize: 14,
          },
        },
      ],
      legend: {
        enabled: false,
      },
      padding: {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20,
      },
    }),
    [data, title],
  );

  return <AgCharts options={chartOptions} />;
}