import React, { useState } from 'react';
import { Dropdown, Menu } from 'antd';
import { useTranslation } from 'react-i18next';

/**
 * 语言选择组件
 */
const Language = () => {
  const { t, i18n } = useTranslation();
  const [selectedKeys, setSelectedKeys] = useState([i18n.language]);
  // 切换语言事件
  const handleChangeLanguage = ({ key }) => {
    setSelectedKeys([key]);
    i18n.changeLanguage(key);
  };

  const langSupports = ['en', 'zh'].map((lang) => ({ label: t(`lang.${lang}`), key: lang }));

  /* 🌏🌐 */
  return (
    <Dropdown menu={{ items: langSupports, onClick: handleChangeLanguage, style: { width: 100 }, selectedKeys: selectedKeys }}>
      <div className='icon'>🌐<span style={{color: '#00b96b'}}>{t(`lang.${i18n.language}`)}</span></div>
    </Dropdown>
  );
};

export default Language;