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

export const TotalPopulationCard: React.FC<TotalPopulationCardProps> = ({
  options: { variable, value },
}) => {
  const { translations } = useTranslator([demographicsTranslations]);

  const totalPopulationOptions = useMemo(
    () => ({
      options: {
        title: translations.totalPopulation,
        values: [
          {
            variable,
            value: new Intl.NumberFormat("en-EN").format(Math.round(value)),
            label: translations.totalPopulation,
            SVGElement: FamilyIcon,
          },
        ],
      },
    }),
    [variable, value],
  );

  return <DemographicsTextCard {...totalPopulationOptions} />;
};