import { useCallback, useEffect, useState } from 'react' import useTranslation from 'next-translate/useTranslation' import setLanguage from 'next-translate/setLanguage' import classNames from 'classnames' import { Arrow } from './Arrow' import { LanguageFlag } from './LanguageFlag' import i18n from '../../../i18n.json' export interface LanguageProps { className?: string } export const Language: React.FC = (props) => { const { className } = props const { lang: currentLanguage } = useTranslation() const [hiddenMenu, setHiddenMenu] = useState(true) const handleHiddenMenu = useCallback(() => { setHiddenMenu(!hiddenMenu) }, [hiddenMenu]) useEffect(() => { if (!hiddenMenu) { window.document.addEventListener('click', handleHiddenMenu) } else { window.document.removeEventListener('click', handleHiddenMenu) } return () => { window.document.removeEventListener('click', handleHiddenMenu) } }, [hiddenMenu, handleHiddenMenu]) const handleLanguage = async (language: string): Promise => { await setLanguage(language) handleHiddenMenu() } return (
    {i18n.locales.map((language, index) => { if (language === currentLanguage) { return null } return (
  • await handleLanguage(language)} >
  • ) })}
) }