import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { t } from "ttag";
import { LangSwitcher as Wrapper, LangLink as Link } from "./styled";
import { useLang, useGetLang } from "../../hooks/locale";
import { useDevice } from "../../contexts/device";
const LangSwitcher = () => {
    const switchLang = useLang();
    const lang = useGetLang();
    const { screen } = useDevice();
    const isDesktop = screen === "large";
    const handleSwitch = React.useCallback((e) => {
        e.preventDefault();
        switchLang(e.currentTarget.lang);
    }, [switchLang]);
    return (_jsxs(Wrapper, { children: [_jsx(Link, { lang: "en", onClick: handleSwitch, style: { marginRight: isDesktop ? "8px" : "16px" }, className: lang === "en" ? "active" : "", children: t `EN` }), _jsx(Link, { lang: "zh", onClick: handleSwitch, style: { marginRight: isDesktop ? "8px" : "16px" }, className: lang === "zh" ? "active" : "", children: t `CH` })] }));
};
export default LangSwitcher;
//# sourceMappingURL=lang-switcher.js.map