import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Item } from "./Item";
import * as styles from "./styles";
import { useNeighborhoodHighlights } from "~/sdks/NeighborhoodHighlights/context";
import { NoDataContent } from "~/components/NoDataContent";
import { getHighlightScoreKeys } from "~/sdks/NeighborhoodHighlights/utils/getHighlightScoreKeys";
export function Highlights() {
    const { t } = useTranslation("neighborhoodHighlights");
    const { isLoading, scores } = useNeighborhoodHighlights();
    const highlights = useMemo(() => {
        if (isLoading || !scores) {
            return [];
        }
        return getHighlightScoreKeys(scores);
    }, [scores, isLoading]);
    if (!isLoading && highlights.length === 0) {
        return React.createElement(NoDataContent, { text: t("noData") });
    }
    return (React.createElement("div", { "data-testid": "highlights-container", className: styles.container }, (isLoading ? [1, 2, 3] : highlights).map((highlight, index) => (React.createElement(Item, { key: index, isLoading: isLoading, score: typeof highlight !== "number" ? highlight : undefined })))));
}
//# sourceMappingURL=index.js.map