import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import * as styles from "../../styles";
import { useDemographics } from "~/sdks/LocalDemographics/context";
import { DemographicsTextCard } from "~/components/DemographicsTextCard";
export const EmploymentStatus = () => {
    const { t } = useTranslation("localDemographics");
    const { demographicsState: { employment_status: employmentStatus }, } = useDemographics();
    const datasets = useMemo(() => (employmentStatus === null || employmentStatus === void 0 ? void 0 : employmentStatus.variables.map((variable) => ({
        label: variable.label,
        data: Number((variable.value * 100).toFixed(1)),
    }))) || [], [employmentStatus === null || employmentStatus === void 0 ? void 0 : employmentStatus.variables]);
    const chartOptions = useMemo(() => ({
        options: {
            title: t("data.income.graphs.employment.title"),
            values: datasets.map((item) => ({
                variable: item.label.replace(" ", "_"),
                label: item.label,
                value: `${item.data}%`,
            })),
        },
    }), [datasets]);
    if (!employmentStatus) {
        return null;
    }
    return (React.createElement("div", { className: styles.cardContainer },
        React.createElement(DemographicsTextCard, Object.assign({}, chartOptions))));
};
//# sourceMappingURL=index.js.map