import { DonutChart } from "@local-logic/core/ui";
import React, { useMemo } from "react";
import useTranslator from "~/hooks/useTranslator";
import { translations as demographicsTranslations } from "~/localization/translation-packs/demographics";
import CommuteSVG from "~/assets/icons/commute.svg";
import { CommuteModeCardProps } from "./types";

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

  const chartOptions = useMemo(
    () => ({
      title: `${translations.commuteModeTitle}`,
      labels,
      data,
      icon: <CommuteSVG />,
    }),
    [labels, data],
  );

  return <DonutChart {...chartOptions}></DonutChart>;
};