import type { ExperimentAnalyticsValueDto } from "@montelo/browser-client";
import { FC } from "react";
import { Bar, BarChart as RechartsBarChart, Rectangle, Tooltip, XAxis, YAxis } from "recharts";
import { CustomTooltip } from "~/pages/experiments/ExperimentId/analytics/charts/CustomTooltip";

export const BarChart: FC<{
  values: Array<ExperimentAnalyticsValueDto>;
}> = ({ values }) => {
  return (
    <RechartsBarChart
      width={470}
      height={320}
      data={values}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5,
      }}
    >
      <XAxis dataKey={"name"} />
      <YAxis />
      <Tooltip content={<CustomTooltip />} cursor={{ fill: "var(--background)" }} />
      <Bar
        dataKey="value"
        fill={"var(--primary)"}
        radius={[8, 8, 0, 0]}
        activeBar={<Rectangle fill={"var(--primary)"} stroke={"var(--primary-foreground)"} />}
        isAnimationActive={false}
      />
    </RechartsBarChart>
  );
};
