import React, { useMemo } from "react";
import * as styles from "./styles";
import NeighborhoodFallbackImage from "~/assets/images/neighborhood-fallback.jpg";
export function NeighborhoodCard({ isFeatured = false, neighborhood, href, }) {
    const imageURL = useMemo(() => (neighborhood === null || neighborhood === void 0 ? void 0 : neighborhood.imageUrl) || NeighborhoodFallbackImage, [neighborhood === null || neighborhood === void 0 ? void 0 : neighborhood.imageUrl]);
    return (React.createElement("div", { className: styles.container, "data-is-featured": isFeatured, "data-is-clickable": !!href },
        React.createElement("a", { href: href, target: "_parent", rel: "noreferrer" },
            React.createElement("div", { className: styles.imgContainer },
                React.createElement("img", { className: styles.image, src: imageURL, alt: neighborhood === null || neighborhood === void 0 ? void 0 : neighborhood.name })),
            React.createElement("div", { className: styles.info },
                React.createElement("h2", { className: styles.name }, neighborhood === null || neighborhood === void 0 ? void 0 : neighborhood.name),
                isFeatured && (React.createElement("p", { className: styles.summary }, neighborhood === null || neighborhood === void 0 ? void 0 : neighborhood.summary))))));
}
//# sourceMappingURL=index.js.map