import { Menu, MenuItem } from '@mui/material';
import { FC } from 'react';
import i18n from '../../../i18n';

interface Props {
  anchorEl: HTMLElement | null;
  handleClose: () => void;
}

const LanguageMenu: FC<Props> = ({ anchorEl, handleClose }) => {
  return (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'right',
      }}
      keepMounted
      transformOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      open={Boolean(anchorEl)}
      onClose={handleClose}
      sx={{
        '& .MuiMenu-paper': {
          minWidth: '240px',
        },
      }}
    >
      <MenuItem
        key="de"
        selected={i18n.language === 'en'}
        onClick={() => {
          i18n.changeLanguage('en');
          handleClose();
        }}
      >
        English
      </MenuItem>
      <MenuItem
        key="en"
        selected={i18n.language === 'de'}
        onClick={() => {
          i18n.changeLanguage('de');
          handleClose();
        }}
      >
        Deutsch
      </MenuItem>
    </Menu>
  );
};

export default LanguageMenu;
