import { Box, Typography, MenuItem, Select, Stack } from '@mui/material';
import { Icon } from '@rkheftan/harmony-ui';
import { Global } from 'iconsax-react';
import { useTranslation } from 'react-i18next';

export default function LanguageAccountBar() {
  const { t, i18n } = useTranslation('authentication');

  const handleChange = (event: any) => {
    const lang = event.target.value;
    i18n.changeLanguage(lang);
    document.body.dir = lang === 'fa' ? 'rtl' : 'ltr';
  };

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        px: 2,
        py: 1.5,
        position: 'absolute',
        bottom: 0,
      }}
    >
      <Stack direction="row" alignItems="center" spacing={1}>
        <Typography sx={{ pr: 4, color: 'secondary.light' }} variant="body2">
          {t('loginForm.accountInfo')}
        </Typography>

        <Icon Component={Global} color="action.active" size="small" />

        <Select
          size="small"
          value={i18n.language}
          onChange={handleChange}
          variant="standard"
          disableUnderline
          sx={{
            '& .MuiSelect-select': {
              paddingTop: 0,
              paddingBottom: 0,
              paddingRight: 2,

              fontSize: '0.875rem',
              fontWeight: 600,
              color: 'action.active',

              display: 'flex',
              alignItems: 'center',
            },
          }}
        >
          <MenuItem value="fa">{t('loginForm.persian')}</MenuItem>
          <MenuItem value="en">{t('loginForm.english')}</MenuItem>
        </Select>
      </Stack>
    </Box>
  );
}
