"use client";

import {
  Bar,
  BarChart as RechartsBarChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { ChartContainer } from "./chart-container";

export interface BarChartDatum {
  label: string;
  value: number;
}

export interface BarChartProps {
  data: BarChartDatum[];
  title?: string;
  description?: string;
  valueFormatter?: (value: number) => string;
  className?: string;
  height?: number;
}

export function BarChart({
  data,
  title,
  description,
  valueFormatter = (value) => String(value),
  className,
  height = 240,
}: BarChartProps) {
  return (
    <ChartContainer
      title={title}
      description={description}
      className={className}
      height={height}
    >
      <ResponsiveContainer width="100%" height="100%">
        <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="rgba(32, 96, 70, 0.12)" vertical={false} />
          <XAxis
            dataKey="label"
            tick={{ fill: "var(--muted)", fontSize: 12 }}
            axisLine={false}
            tickLine={false}
          />
          <YAxis
            tick={{ fill: "var(--muted)", fontSize: 12 }}
            axisLine={false}
            tickLine={false}
            width={40}
          />
          <Tooltip
            cursor={{ fill: "rgba(34, 197, 94, 0.08)" }}
            formatter={(value) => [valueFormatter(Number(value)), "Value"]}
            contentStyle={{
              borderRadius: "12px",
              border: "1px solid var(--border)",
              fontSize: "12px",
            }}
          />
          <Bar
            dataKey="value"
            fill="var(--success-green)"
            radius={[6, 6, 0, 0]}
            maxBarSize={48}
          />
        </RechartsBarChart>
      </ResponsiveContainer>
    </ChartContainer>
  );
}