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 { AvgIncomeCardProps } from "./types";

/**
 * Intl.NumberFormat does a good job at displaying currency.
 *
 * We USD for the currency so that it formats to have a $ at the start of the amount.
 * If we put CAD, it will output as CAD$
 */
export const AvgIncomeCard: React.FC<AvgIncomeCardProps> = ({
  options: { incomeTypes },
}) => {
  const { translations } = useTranslator([demographicsTranslations]);

  const avgIncomeOptions = useMemo(
    () => ({
      options: {
        title: translations.averageIncomeTitle,
        values: incomeTypes.map((incomeType) => ({
          variable: incomeType.variable,
          value: `${new Intl.NumberFormat("en-EN", {
            style: "currency",
            currency: "USD",
            maximumFractionDigits: 1,
          }).format(incomeType.value / 1000)}${
            incomeType.value >= 1000 ? "k" : ""
          }`,
          label: translations[incomeType.variable],
        })),
      },
    }),
    [incomeTypes]
  );

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