"use client";

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

interface BarData {
  category: string;
  value: number;
  color?: string;
}

interface RevenueChartProps {
  data: BarData[];
  title?: string;
}

export function RevenueChart({
  data,
  title = "Monthly Revenue",
}: RevenueChartProps) {
  const chartOptions: AgChartOptions = useMemo(
    () =>
      ({
        title: {
          text: title,
        },
        data,
        series: [
          {
            type: "bar",
            xKey: "category",
            yKey: "value",
            fill: "#10b981",
            stroke: "#ffffff",
            strokeWidth: 2,
            cornerRadius: 4,
            highlightStyle: {
              item: {
                fill: "#059669",
              },
            },
            label: {
              placement: "outside",
              formatter: (params: any) => `$${params.value.toLocaleString()}`,
            },
            tooltip: {
              renderer: (params: any) => ({
                title: params.datum.category,
                content: `Revenue: $${params.datum.value.toLocaleString()}`,
              }),
            },
          },
        ],
        axes: [
          {
            type: "category",
            position: "bottom",
          },
          {
            type: "number",
            position: "left",
            label: {
              formatter: (params: any) => `$${params.value.toLocaleString()}`,
            },
          },
        ],
      }) as any,
    [data, title],
  );

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