import React from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { Menu, MenuItem } from "@material-ui/core";

const LanguageMenu = ({ anchorEl, onLanguageChange, onClose }) => {
  const { t } = useTranslation();
  const open = Boolean(anchorEl);

  return (
    <Menu
      id="language-menu"
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: "top",
        horizontal: "right"
      }}
      keepMounted
      transformOrigin={{
        vertical: "top",
        horizontal: "right"
      }}
      open={open}
      onClose={onClose}
    >
      <MenuItem onClick={onLanguageChange("ro")}>
        {t("Language.Romanian")}
      </MenuItem>
      <MenuItem onClick={onLanguageChange("en")}>
        {t("Language.English")}
      </MenuItem>
    </Menu>
  );
};

LanguageMenu.propTypes = {
  anchorEl: PropTypes.object,
  onLanguageChange: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired
};

export default LanguageMenu;
