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 LanguagesSVG from "~/assets/icons/languages.svg";
import { SpokenLanguageCardProps } from "./types";

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

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

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