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 HouseholdSVG from "~/assets/icons/household.svg";
import { FamiliesWithChildrenCardProps } from "./types";

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

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

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