import {
  Bar,
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
  LabelList,
  ResponsiveContainer,
} from "recharts";
import { Card, CardContent } from "~/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
} from "~/components/ui/chart";
import { formatNumber } from "~/lib/utils";

export type PopupChartDatum = {
  name: string;
  value: number;
};

const chartConfig = {
  value: {
    label: "Operational Fee",
    color: "#4ADE80", // Green-400
  },
} satisfies ChartConfig;


export function PopupBarChart({
  data,
}: {
  data: PopupChartDatum[];
}) {
  return (
    <Card className="py-0 bg-transparent mt-4 border-none h-full">
      <CardContent className="px-2 sm:p-6 bg-transparent">
        <ChartContainer config={chartConfig} className="aspect-auto h-80 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart
              accessibilityLayer
              data={data}
              margin={{ top: 20, right: 20, left: 20, bottom: 5 }}
            >
              <CartesianGrid vertical={false} stroke="#475569" />
              <XAxis
                dataKey="name"
                tickLine={false}
                axisLine={false}
                tickMargin={8}
                tick={{ fill: "#94a3b8", fontSize: 12 }}
              />
              <YAxis
                tickLine={false}
                axisLine={false}
                tickMargin={8}
                tick={{ fill: "#94a3b8", fontSize: 12 }}
                tickFormatter={(value) => `${formatNumber(Math.round(value))}`}
              />
              <Bar dataKey="value" fill={chartConfig.value.color} radius={[8, 8, 0, 0]}>
                <LabelList
                  dataKey="value"
                  position="top"
                  style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
                  formatter={(v: number) => `${formatNumber(Math.round(v))}`}
                />
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}