import React from "react";
import { useTranslation } from "react-i18next";
import { Tag } from "@local-logic/design-system";
import { SchoolName } from "../../SchoolName";
import * as styles from "../styles";
import { SchoolSection } from "./SchoolSection";
import { SchoolCategories } from "./SchoolCategories";
import { formatAddress } from "~/utils/primitives/stringUtils";
export const SchoolItem = ({ school }) => {
    var _a, _b, _c, _d;
    const { t } = useTranslation("neighborhoodSchools");
    return (React.createElement("div", { className: styles.slide },
        React.createElement(SchoolName, { school: school }),
        React.createElement(SchoolSection, { title: t("headers.type") },
            React.createElement("div", { className: styles.badges }, (_b = (_a = school.school_attributes) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.map((type) => (React.createElement(Tag, { key: `${school.name}-${type}` }, type))))),
        React.createElement(SchoolSection, { title: t("headers.levels") },
            React.createElement("div", { className: styles.badges }, (_d = (_c = school.school_attributes) === null || _c === void 0 ? void 0 : _c.levels) === null || _d === void 0 ? void 0 : _d.map((level) => (React.createElement(Tag, { variant: "light", key: `${school.name}-${level}` }, level))))),
        React.createElement(SchoolCategories, { school: school }),
        React.createElement(SchoolSection, { title: t("headers.address") },
            React.createElement("p", { className: styles.address }, formatAddress({
                street: school.address,
                city: school.city,
                state: school.province,
            })))));
};
//# sourceMappingURL=index.js.map