1import {
 2  chakra,
 3  IconButton,
 4  Menu,
 5  MenuButton,
 6  MenuItem,
 7  MenuList,
 8} from '@chakra-ui/react';
 9import { LanguageIcon } from '@heroicons/react/24/outline';
10import { FC, ReactNode } from 'react';
11import { useTranslation } from 'react-i18next';
12
13type HeaderProps = {
14  actions?: ReactNode;
15};
16
17const LangIcon = chakra(LanguageIcon, {
18  baseStyle: {
19    w: 4,
20    h: 4,
21  },
22});
23
24export const Language: FC<HeaderProps> = () => {
25  const { i18n } = useTranslation();
26
27  var changeLanguage = (lang: string) => {
28    i18n.changeLanguage(lang);
29  };
30
31  return (
32    <Menu placement="bottom-end">
33      <MenuButton
34        as={IconButton}
35        size="sm"
36        variant="outline"
37        icon={<LangIcon />}
38        position="relative"
39      />
40      <MenuList minW="100px" zIndex={9999}>
41        <MenuItem
42          maxW="100px"
43          fontSize="sm"
44          onClick={() => changeLanguage('en')}
45        >
46          English
47        </MenuItem>
48        <MenuItem
49          maxW="100px"
50          fontSize="sm"
51          onClick={() => changeLanguage('fa')}
52        >
53          فارسی
54        </MenuItem>
55        <MenuItem
56          maxW="100px"
57          fontSize="sm"
58          onClick={() => changeLanguage('zh-cn')}
59        >
60          简体中文
61        </MenuItem>
62        <MenuItem
63          maxW="100px"
64          fontSize="sm"
65          onClick={() => changeLanguage('ru')}
66        >
67          Русский
68        </MenuItem>
69      </MenuList>
70    </Menu>
71  );
72};