import React, { useMemo } from "react";
import { MapPinIcon } from "@phosphor-icons/react";
import * as styles from "./styles";
import { useNeighborhoodHero } from "~/sdks/NeighborhoodHero/context";
export const Header = () => {
    var _a, _b;
    const { isLoading, locale, geography, neighborhoodImage, isFallbackImage } = useNeighborhoodHero();
    const style = useMemo(() => {
        if (!neighborhoodImage) {
            return {};
        }
        return {
            backgroundImage: `url("${neighborhoodImage}")`,
        };
    }, [neighborhoodImage]);
    if (isLoading) {
        return null;
    }
    return (React.createElement("div", { "data-testid": "header-container", className: styles.container, style: style, "data-has-image": neighborhoodImage !== null, "data-use-backdrop": !isFallbackImage && neighborhoodImage !== null },
        React.createElement("div", { className: styles.gradientContainer },
            React.createElement(MapPinIcon, { className: styles.icon }),
            React.createElement("h1", { "data-testid": "micro-location", className: styles.microLocation }, (_a = geography === null || geography === void 0 ? void 0 : geography.name) === null || _a === void 0 ? void 0 : _a[locale]),
            typeof geography !== "undefined" &&
                (geography === null || geography === void 0 ? void 0 : geography.level) < 30 &&
                typeof geography.city !== "undefined" && (React.createElement("div", { "data-testid": "macro-location", className: styles.macroLocation }, (_b = geography === null || geography === void 0 ? void 0 : geography.city) === null || _b === void 0 ? void 0 : _b[locale])))));
};
//# sourceMappingURL=index.js.map