import { jsx as _jsx } from "react/jsx-runtime";
import styled from "styled-components";
const LANGS = [
    { code: "en", label: "EN" },
    { code: "zh", label: "中文" },
];
const Container = styled.div `
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 85px;

  a {
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    width: fit-content;
    display: block;
    font-family: Bold;
    font-size: 16px;
    line-height: 16px;
    padding: 7px 5px 5px;
    margin: 0 0 15px;
    color: ${({ theme }) => theme.new?.link?.activeColor ?? "unset"};
  }
  a.active {
    border: 1px solid ${({ theme }) => theme.new?.link?.activeColor ?? "unset"};
  }
`;
const LangsMobile = ({ className, selected, handleSelectLang, }) => {
    return (_jsx(Container, { className: `ui-navigation__mobile-links ${className ?? ""}`, children: LANGS.map(({ code, label }) => (_jsx("a", { href: `/${code}`, className: selected === code ? "active" : "", onClick: (e) => {
                e.preventDefault();
                handleSelectLang(code);
            }, children: label }, code))) }));
};
export default LangsMobile;
//# sourceMappingURL=langs-mobile.js.map