"use client";

import React from "react";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgChartOptions,
  AgLineSeriesOptions,
  AgPieSeriesOptions,
} from "ag-charts-community";

export function BarChart({
  data,
  xKey,
  yKey,
  color = "#3c82e6",
  height = 300,
}: {
  data: any[];
  xKey: string;
  yKey: string;
  color?: string;
  height?: number;
}) {
  const options: AgChartOptions = {
    data,
    series: [
      {
        type: "bar",
        xKey,
        yKey,
        fill: color,
      } as AgBarSeriesOptions,
    ],
    height,
  };

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

export function LineChart({
  data,
  xKey,
  yKey,
  color = "#3b82f6",
  height = 300,
}: {
  data: any[];
  xKey: string;
  yKey: string;
  color?: string;
  height?: number;
}) {
  const options: AgChartOptions = {
    data,
    series: [
      {
        type: "line",
        xKey,
        yKey,
        stroke: color,
        strokeWidth: 3,
        marker: {
          size: 6,
          fill: color,
          stroke: "#ffffff",
          strokeWidth: 2,
        },
      } as AgLineSeriesOptions,
    ],
    height,
  };

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

export function PieChart({
  data,
  labelKey,
  valueKey,
  height = 300,
}: {
  data: any[];
  labelKey: string;
  valueKey: string;
  height?: number;
}) {
  const options: AgChartOptions = {
    data,
    series: [
      {
        type: "pie",
        labelKey,
        angleKey: valueKey,
      } as AgPieSeriesOptions,
    ],
    height,
  };

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

export function AreaChart({
  data,
  xKey,
  yKey,
  color = "#3b82f6",
  height = 300,
}: {
  data: any[];
  xKey: string;
  yKey: string;
  color?: string;
  height?: number;
}) {
  const options: AgChartOptions = {
    data,
    series: [
      {
        type: "area",
        xKey,
        yKey,
        fill: color,
        stroke: color,
        strokeWidth: 2,
      },
    ],
    height,
  };

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