"use client";

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import { CHART_COLORS, chartTheme } from "@/config/chart-theme";
import type { RevenueTrendPoint } from "@/lib/queries/admin-queries";

interface RevenueTrendChartProps {
  data: RevenueTrendPoint[];
}

export function RevenueTrendChart({ data }: RevenueTrendChartProps) {
  const formatted = data.map((d) => ({
    ...d,
    amount: d.amountCents / 100,
  }));

  return (
    <div className="h-[180px] w-full sm:h-[200px]">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={formatted} margin={{ top: 8, right: 8, left: -8, bottom: 0 }}>
          <CartesianGrid {...chartTheme.cartesianGrid} />
          <XAxis dataKey="month" {...chartTheme.xAxis} />
          <YAxis {...chartTheme.yAxis} tickFormatter={(v) => `$${v}`} />
          <Tooltip {...chartTheme.tooltip} />
          <Bar
            dataKey="amount"
            fill={CHART_COLORS.primary}
            radius={[4, 4, 0, 0]}
          />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}