import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { UsersFourIcon } from "@phosphor-icons/react";
import * as styles from "../../styles";
import { useDemographics } from "~/sdks/LocalDemographics/context";
import { DemographicsTextCard } from "~/components/DemographicsTextCard";
export const TotalPopulation = () => {
    const { t } = useTranslation("localDemographics");
    const { demographicsState: { population_total: populationTotal }, } = useDemographics();
    const dataset = useMemo(() => populationTotal === null || populationTotal === void 0 ? void 0 : populationTotal.variables[0], [populationTotal === null || populationTotal === void 0 ? void 0 : populationTotal.variables]);
    const chartOptions = useMemo(() => ({
        options: {
            title: t("data.population.graphs.totalPopulation.title"),
            values: [
                {
                    variable: (dataset === null || dataset === void 0 ? void 0 : dataset.variable) || "",
                    value: `${new Intl.NumberFormat("en-EN").format(Math.round((dataset === null || dataset === void 0 ? void 0 : dataset.value) || 0))}`,
                    label: t("data.population.graphs.totalPopulation.title"),
                    icon: UsersFourIcon,
                },
            ],
        },
    }), [dataset]);
    return (React.createElement("div", { className: styles.cardContainer },
        React.createElement(DemographicsTextCard, Object.assign({}, chartOptions))));
};
//# sourceMappingURL=index.js.map