import React from "react";
import { useTranslation } from "react-i18next";
import { Layout, Menu } from "antd";
import { UserOutlined, BankFilled } from "@ant-design/icons";

export default function ProfileSideBar({
  sidebarSelection,
  setSidebarSelection
}) {
  const { t } = useTranslation();

  const onMenuClick = e => {
    setSidebarSelection({ ...sidebarSelection, key: e.key });
  };

  return (
    <Layout.Sider>
      <Menu
        theme="dark"
        selectedKeys={sidebarSelection.key}
        onClick={onMenuClick}
        mode="inline"
      >
        <Menu.Item key="profile">
          <UserOutlined />
          <span>{t("menus.profilesidebar.profile")}</span>
        </Menu.Item>
        <Menu.Item key="shops">
          <BankFilled />
          <span>{t("menus.profilesidebar.shops")}</span>
        </Menu.Item>
      </Menu>
    </Layout.Sider>
  );
}
