import React from "react";
import { Dropdown, Space } from "antd";
import languageIcon from "../../asstes/icon/language.png";
import "../../asstes/css/header.css";

const language: React.FC = () => {
    const items = [
        {
            label: (<span className="ant-dropdown-content-style" onClick={() => handleMenuClick("English")}>English</span>),
            key: "1",
        },
        {
            label: (<span className="ant-dropdown-content-style" onClick={() => handleMenuClick("zh-hant")}>繁體中文</span>),
            key: "2",
        },
        {
            label: (<span className="ant-dropdown-content-style" onClick={() => handleMenuClick("zh-hans")}>简体中文</span>),
            key: "3",
        },
    ];
    const handleMenuClick = (e: any) => {
        localStorage.setItem("language", e);
    }
    return (
        <Dropdown menu={{ items }} trigger={["click"]}>
            <Space>
                <div className="header-right-text">
                    <img src={languageIcon} alt="language" className="header-right-icon" />
                    <span>语言</span>
                </div>
            </Space>
        </Dropdown>
    );
}

export default language;