import React from "react";
import { useTranslation } from "react-i18next";
import useEmblaCarousel from "embla-carousel-react";
import { twMerge } from "tailwind-merge";
import { useDotButton } from "./EmblaCarouselDotButton";
import { Controls } from "./Controls";
import { SchoolItem } from "./SchoolItem";
import * as styles from "./styles";
import { NoDataContent } from "~/components/NoDataContent";
import { useNeighborhoodSchools } from "~/sdks/NeighborhoodSchools/context";
import "./embla.css";
export const SchoolsList = ({ schools }) => {
    const { t } = useTranslation("neighborhoodSchools");
    const { isLoading } = useNeighborhoodSchools();
    const [emblaRef, emblaApi] = useEmblaCarousel();
    const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi);
    return (React.createElement(React.Fragment, null,
        React.createElement("section", { className: twMerge(`embla ${styles.section}`), "data-is-loading": isLoading },
            !isLoading &&
                (!schools || schools.length === 0 ? (React.createElement(NoDataContent, { text: t("noData") })) : (React.createElement("div", { className: "embla__viewport", ref: emblaRef },
                    React.createElement("div", { className: twMerge(`embla__container ${styles.container}`) }, schools.map((school) => (React.createElement("div", { className: "embla__slide", key: school.name },
                        React.createElement(SchoolItem, { school: school })))))))),
            React.createElement(Controls, { selectedIndex: selectedIndex, scrollSnaps: scrollSnaps, onDotButtonClick: onDotButtonClick }))));
};
//# sourceMappingURL=index.js.map