import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { t } from "ttag";
import { DeviceProvider, useDevice } from "../../contexts/device";
import Footer from "./index";
import { LangSwitcher, LangLink } from "./styled";
export default {
    title: "Genshiro/Composed/Footer",
    component: Footer,
};
const DemoLangs = ({ setLang, lang }) => {
    const { screen } = useDevice();
    const isDesktop = screen === "large";
    return (_jsxs(LangSwitcher, { children: [_jsx(LangLink, { lang: "en", onClick: () => setLang("en"), style: { marginRight: isDesktop ? "8px" : "16px" }, className: lang === "en" ? "active" : "", children: t `EN` }), _jsx(LangLink, { lang: "zh", onClick: () => setLang("zh"), style: { marginRight: isDesktop ? "8px" : "16px" }, className: lang === "zh" ? "active" : "", children: t `CH` })] }));
};
export const GenshiroTheme = () => {
    const [lang, setLang] = React.useState("en");
    return (_jsx(_Fragment, { children: _jsx(DeviceProvider, { children: _jsx(Footer, { lang: lang, langSwitcher: _jsx(DemoLangs, { setLang: setLang, lang: lang }) }) }) }));
};
//# sourceMappingURL=index.stories.js.map