import React from "react";
import { useTranslation } from "react-i18next";
import { CaretRightIcon } from "@phosphor-icons/react";
import { PopupContent } from "../PopupContent";
import * as styles from "./styles";
export function ClusterPopupContent({ activeMarker, onMarkerSelected, onClose, }) {
    const { t } = useTranslation(["common"]);
    if (!activeMarker || activeMarker.markers.length < 2) {
        return null;
    }
    return (React.createElement(PopupContent, { title: t("common:map.cluster.poiCount", {
            count: activeMarker.markers.length,
        }), secondaryTitleStyle: true, onClose: onClose },
        React.createElement("div", { className: styles.container, "data-testid": "cluster-popup-content" },
            React.createElement("ul", { className: styles.list }, activeMarker.markers.map((marker) => (React.createElement("li", { key: `marker-popup-list-${marker.id}`, className: styles.item, "data-testid": "marker-popup-list-item" },
                React.createElement("button", { className: styles.button, onClick: () => onMarkerSelected === null || onMarkerSelected === void 0 ? void 0 : onMarkerSelected(marker), "data-testid": `marker-popup-item-button-${marker.id}` },
                    React.createElement("span", { className: styles.itemText }, marker.name),
                    " ",
                    React.createElement(CaretRightIcon, { weight: "bold", className: styles.icon })))))))));
}
//# sourceMappingURL=index.js.map