import { IncomeBracketsChartProps } from "./types";
import { Chart } from "@local-logic/core/ui";
import React, { useMemo } from "react";
import useTranslator from "~/hooks/useTranslator";
import { translations as demographicsTranslations } from "~/localization/translation-packs/demographics";

export const IncomeBracketsChart: React.FC<IncomeBracketsChartProps> = ({
  options: { labels, data },
}) => {
  const { translations } = useTranslator([demographicsTranslations]);

  const chartOptions = useMemo(
    () => ({
      title: `${translations.incomeBracketsTitle}`,
      labels,
      data,
      unit: "%",
    }),
    [labels, data]
  );

  return (
    <Chart.Root {...chartOptions}>
      <Chart.BarChart />
    </Chart.Root>
  );
};