import React from 'react';
import { useTranslation } from "react-i18next";

const languages = function* () {
    const langs = [
        { 'short': 'en', 'long': 'English' },
        { 'short': 'de', 'long': 'Deutsch' },
        { 'short': 'ru', 'long': 'Русский' },
    ];
    for (let i of langs) {
        yield <option key={i.short} value={i.short}>{i.long}</option>
    }
}

const onChangeLang = (lang, i18n) => {
    i18n.changeLanguage(lang);
}

const LangPicker = (_) => {
    const { i18n } = useTranslation();

    return (
        <div className="is-right">
            <div className="select">
                <select onChange={e => onChangeLang(e.target.value, i18n)} value={i18n.language}>
                    {[...languages()]}
                </select>
            </div>
        </div>
    );
}

export default LangPicker;
@@ -160,15 +160,13 @@
 ': '
-English
+%F0%9F%87%BA%F0%9F%87%B8 EN
 ' %7D,
@@ -204,15 +204,13 @@
 ': '
-Deutsch
+%F0%9F%87%A9%F0%9F%87%AA DE
 ' %7D,
@@ -248,15 +248,13 @@
 ': '
-%D0%A0%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9
+%F0%9F%87%B7%F0%9F%87%BA %D0%A0%D0%A3
 ' %7D,

improve language picker