import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useNeighborhoodDemographics } from "~/sdks/NeighborhoodDemographics/context";
import { DemographicsTextCard } from "~/components/DemographicsTextCard";
export const HomeOwnershipType = () => {
    const { t } = useTranslation("neighborhoodDemographics");
    const { demographicsData: { property_tenure: propertyTenure, housing_tenancy: housingTenancy, }, } = useNeighborhoodDemographics();
    // For the US, the name of the property changes
    const housingInfo = useMemo(() => housingTenancy || propertyTenure, [housingTenancy, propertyTenure]);
    const dataset = useMemo(() => (housingInfo === null || housingInfo === void 0 ? void 0 : housingInfo.variables.filter((variable) => !variable.type || variable.type === "percent").map((variable) => ({
        label: variable.label,
        data: Number((variable.value * 100).toFixed(1)),
    }))) || [], [housingInfo === null || housingInfo === void 0 ? void 0 : housingInfo.variables]);
    const chartOptions = useMemo(() => ({
        options: {
            title: t("data.housing.graphs.homeOwnershipType.title"),
            values: dataset.map((item) => ({
                variable: item.label.replace(" ", "_"),
                label: item.label,
                value: `${item.data}%`,
            })),
        },
    }), [dataset]);
    return React.createElement(DemographicsTextCard, Object.assign({}, chartOptions));
};
//# sourceMappingURL=index.js.map