import { ExperimentAnalyticsChartDto } from "@montelo/browser-client";
import _ from "lodash";
import { FC } from "react";
import { ChartTypeMap } from "~/pages/experiments/ExperimentId/analytics/ChartTypeMap";

export const ExperimentAnalyticsChart: FC<{
  chart: ExperimentAnalyticsChartDto;
}> = ({ chart }) => {
  const Chart = ChartTypeMap[chart.type];

  return (
    <div className={"flex flex-col gap-2 justify-center items-center"}>
      <h2 className={"justify-center"}>{_.capitalize(chart.property)}</h2>
      <Chart values={chart.values} />
    </div>
  );
};
