'use client'

import React, { useMemo } from 'react'
import { AgChartsReact } 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 <AgChartsReact options={chartOptions} />
}