import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useNeighborhoodDemographics } from "~/sdks/NeighborhoodDemographics/context";
import { DemographicsTextCard } from "~/components/DemographicsTextCard";
export const EmploymentStatus = () => {
    const { t } = useTranslation("neighborhoodDemographics");
    const { demographicsData: { employment_status: employmentStatus }, } = useNeighborhoodDemographics();
    const datasets = useMemo(() => (employmentStatus === null || employmentStatus === void 0 ? void 0 : employmentStatus.variables.filter((variable) => !variable.type || variable.type === "percent").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(DemographicsTextCard, Object.assign({}, chartOptions));
};
//# sourceMappingURL=index.js.map