import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import * as styles from "./styles";
import { useLeadCapture } from "~/sdks/LeadCapture/context";
export function Header() {
    const { t } = useTranslation("leadCapture");
    const { addressLabel, isGeographyBased } = useLeadCapture();
    const neighborhood = useMemo(() => {
        if (addressLabel) {
            if (isGeographyBased === "geographyId") {
                // For geographyId, use only the first part of the label (before any comma).
                // Handles both comma-separated labels ("Boston, MA") and simple labels ("Boston").
                return addressLabel.split(",")[0].trim();
            }
            return addressLabel;
        }
        return t("header.titleNoNeighborhood");
    }, [addressLabel, isGeographyBased, t]);
    return (React.createElement("div", { "data-testid": "header" },
        React.createElement("h1", { "data-testid": "header-title", className: styles.title }, t("header.title", {
            neighborhood,
            interpolation: { escapeValue: false },
        })),
        React.createElement("p", { className: styles.description }, t("header.description"))));
}
//# sourceMappingURL=index.js.map