import React from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@local-logic/design-system";
import { TrafficSignIcon } from "@phosphor-icons/react";
import { useRootElement } from "../context";
import * as styles from "./styles";
import { useResponsiveBreakpoints } from "~/hooks/useResponsiveBreakpoints";
export function Trigger() {
    const { t } = useTranslation("localContent");
    const breakpoints = useResponsiveBreakpoints();
    const { isOpen, onToggleIsOpen } = useRootElement();
    return (React.createElement(Button, { className: styles.container, prefixIcon: React.createElement(TrafficSignIcon, { className: styles.icon }), "data-testid": "commute-calculator-trigger", "data-is-active": isOpen, onClick: onToggleIsOpen }, breakpoints.sm &&
        t("commute.cta", { context: breakpoints.xs ? "long" : "short" })));
}
//# sourceMappingURL=index.js.map