import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@local-logic/design-system";
import * as styles from "./styles";
export function Commute({ isLoading = false, commuteType, durationInSeconds, onCalculateCommute, }) {
    const { t } = useTranslation(["localContent", "common"]);
    const durationString = useMemo(() => {
        if (!durationInSeconds)
            return null;
        const hours = Math.floor(durationInSeconds / 60 / 60);
        const minutes = Math.floor((durationInSeconds / 60) % 60);
        const minutesString = `${minutes} ${t("common:time.minute", { count: minutes })}`;
        if (hours === 0) {
            return minutesString;
        }
        return `${hours} ${t("common:time.hour", { count: hours })} ${minutesString}`;
    }, [durationInSeconds, t]);
    const travelTimeString = useMemo(() => {
        if (!durationString)
            return "";
        return `${durationString} ${t(`commute.travelTypes.${commuteType}`)}`;
    }, [durationString, commuteType, t]);
    if (!isLoading && typeof durationInSeconds === "undefined") {
        return null;
    }
    return (React.createElement("div", { className: styles.container },
        isLoading && (React.createElement("div", { "data-testid": "poi-popup-commute-loading", className: styles.loading })),
        !isLoading && durationString && (React.createElement("p", { "data-testid": "poi-popup-commute-duration", "aria-label": travelTimeString }, travelTimeString.toLowerCase())),
        onCalculateCommute && (React.createElement(Button, { "data-testid": "poi-popup-view-route-button", className: styles.button, onClick: onCalculateCommute, variant: "ghost", isDisabled: isLoading }, t("commute.viewRoute")))));
}
//# sourceMappingURL=index.js.map