import React, { useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { useTranslation } from "react-i18next";
import { ValueIndicator } from "./ValueIndicator";
import * as styles from "./styles";
import { useLocalContent } from "~/sdks/LocalContent/context";
export function ScoreComparison({ scoreKey, locationScoreValue, comparedTo, className, }) {
    const { t } = useTranslation("localContent");
    const { hideScoresList } = useLocalContent();
    const hide = useMemo(() => scoreKey === null || (hideScoresList === null || hideScoresList === void 0 ? void 0 : hideScoresList.includes(scoreKey)), [hideScoresList, scoreKey]);
    const comparison = useMemo(() => {
        if (typeof locationScoreValue === "undefined" ||
            typeof comparedTo === "undefined") {
            return null;
        }
        if (locationScoreValue > comparedTo.value) {
            return "higher";
        }
        if (locationScoreValue < comparedTo.value) {
            return "lower";
        }
        return "equal";
    }, [locationScoreValue, comparedTo === null || comparedTo === void 0 ? void 0 : comparedTo.value]);
    if (hide || typeof comparedTo === "undefined" || comparison === null) {
        return null;
    }
    return (React.createElement("div", { className: twMerge(styles.container, className), "data-testid": "score-comparison" },
        React.createElement(ValueIndicator, { comparison: comparison }),
        React.createElement("p", null, t("scoreComparison.text", {
            context: comparison !== "equal" ? comparison : undefined,
            name: comparedTo.text,
            value: comparedTo.value,
        }))));
}
//# sourceMappingURL=index.js.map