import React from "react";
import { useTranslation } from "react-i18next";
import * as globalStyles from "../styles";
import * as styles from "./styles";
import { primitiveUtils } from "~/utils";
export function SchoolAttributes({ attributes, boardAttributes, categories, onLinkClick, rating, }) {
    const { t } = useTranslation(["common"]);
    if (!attributes || Object.keys(attributes).length === 0) {
        return null;
    }
    return (React.createElement("div", { className: globalStyles.content },
        React.createElement("ul", null,
            rating && (React.createElement("li", { className: styles.item, "data-testid": "school-attributes-rating" },
                React.createElement("span", { className: styles.label }, t("common:map.marker.schoolAttributes.rating")),
                React.createElement("span", { className: styles.rating }, rating))),
            typeof (attributes === null || attributes === void 0 ? void 0 : attributes.grades) !== "undefined" && (React.createElement("li", { className: styles.item, "data-testid": "school-attributes-grades" },
                React.createElement("span", { className: styles.label }, t("common:map.marker.schoolAttributes.levels")),
                ": ",
                primitiveUtils.string.capitalize(attributes.grades))),
            typeof (attributes === null || attributes === void 0 ? void 0 : attributes.programs) !== "undefined" && (React.createElement("li", { className: styles.item, "data-testid": "school-attributes-programs" },
                React.createElement("span", { className: styles.label }, t("common:map.marker.schoolAttributes.programs")),
                ": ",
                attributes.programs.join(", "))),
            typeof (attributes === null || attributes === void 0 ? void 0 : attributes.languages) !== "undefined" && (React.createElement("li", { className: styles.item, "data-testid": "school-attributes-languages" },
                React.createElement("span", { className: styles.label }, t("common:map.marker.schoolAttributes.languages")),
                ": ",
                attributes.languages.join(", ").toUpperCase())),
            typeof (attributes === null || attributes === void 0 ? void 0 : attributes.types) !== "undefined" && (React.createElement("li", { className: styles.item, "data-testid": "school-attributes-types" },
                React.createElement("span", { className: styles.label }, t("common:map.marker.schoolAttributes.types")),
                ": ",
                attributes.types.join(", "))),
            typeof categories !== "undefined" && categories.length > 0 && (React.createElement("li", { className: styles.item, "data-testid": "school-attributes-categories" },
                React.createElement("span", { className: styles.label }, t("common:map.marker.schoolAttributes.categories")),
                ":",
                " ",
                categories
                    .map((category) => {
                    return t(`common:map.marker.categories.${category}`);
                })
                    .join(", "))),
            typeof (boardAttributes === null || boardAttributes === void 0 ? void 0 : boardAttributes.url) !== "undefined" && (React.createElement("li", { className: styles.item, "data-testid": "school-attributes-board" },
                React.createElement("span", { className: styles.label }, t("common:map.marker.schoolAttributes.board")),
                ":",
                " ",
                React.createElement("a", { onClick: () => onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(boardAttributes.url || ""), "data-testid": "school-attributes-board-link", href: boardAttributes.url, target: "_blank", rel: "noopener noreferrer" }, (boardAttributes === null || boardAttributes === void 0 ? void 0 : boardAttributes.name) || (boardAttributes === null || boardAttributes === void 0 ? void 0 : boardAttributes.url)))))));
}
//# sourceMappingURL=index.js.map