import { Dropdown, Button, Space, GlobalOutlined, FC } from '@/imports';
import { useLocale } from '../../contexts/LocaleContext';

const LanguageSwitch: FC = () => {
  const { locale, setLocale } = useLocale();

  const languages = [
    { key: 'zh-CN', label: '简体中文', icon: '🇨🇳' },
    { key: 'en-US', label: 'English', icon: '🇺🇸' },
  ];

  const handleLanguageChange = (key: string) => {
    setLocale(key);
  };

  const currentLang = languages.find(l => l.key === locale) || languages[0];

  return (
    <Dropdown
      menu={{
        items: languages.map(lang => ({
          key: lang.key,
          label: (
            <Space>
              <span>{lang.icon}</span>
              <span>{lang.label}</span>
            </Space>
          ),
          onClick: () => handleLanguageChange(lang.key),
        })),
        selectedKeys: [locale],
      }}
      trigger={['click']}
      placement="bottomRight"
    >
      <Button type="text" icon={<GlobalOutlined />} style={{ color: 'inherit' }}>
        {currentLang.label}
      </Button>
    </Dropdown>
  );
};

export default LanguageSwitch;
