"use client";

import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

interface CostChartProps {
  color?: string;
  data: Array<{ label: string; value: number }>;
  title?: string;
  unit?: string;
}

export function CostChart({
  data,
  title,
  unit = "$",
  color = "#fd105e",
}: CostChartProps) {
  const chartConfig = {
    value: {
      label: unit,
      color,
    },
  } satisfies ChartConfig;

  return (
    <div className="my-8 rounded-xl border border-white/10 bg-white/[0.02] p-4 sm:p-6">
      {title && (
        <p className="mb-5 text-center font-semibold text-neutral-300 text-sm">
          {title}
        </p>
      )}
      <ChartContainer className="h-[280px] w-full" config={chartConfig}>
        <BarChart
          accessibilityLayer
          barCategoryGap="25%"
          data={data}
          margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
        >
          <CartesianGrid stroke="rgba(255,255,255,0.05)" vertical={false} />
          <XAxis
            axisLine={false}
            dataKey="label"
            tick={{ fill: "#a3a3a3", fontSize: 11 }}
            tickLine={false}
            tickMargin={8}
          />
          <YAxis
            axisLine={false}
            tick={{ fill: "#737373", fontSize: 11 }}
            tickFormatter={(v) => `${unit}${v.toLocaleString()}`}
            tickLine={false}
            width={50}
          />
          <ChartTooltip
            content={<ChartTooltipContent />}
            cursor={{ fill: "rgba(255,255,255,0.03)" }}
          />
          <Bar
            dataKey="value"
            fill="var(--color-value)"
            maxBarSize={48}
            radius={[4, 4, 0, 0]}
          />
        </BarChart>
      </ChartContainer>
    </div>
  );
}