import React from 'react';
import { Box, Typography, Avatar } from '@mui/material';
import FeatherIcon from 'feather-icons-react';
import AuthInfo from '../../../constants/AuthInfo';

const ProfileDropdown = () => {
  const email = AuthInfo.getEmail();
  const name = email.split('@')[0];

  return (
    <Box>
      <Box
        sx={{
          pb: 3,
          mt: 3,
        }}
      >
        <Box display="flex" alignItems="center">
          <Box>
            <Typography
              variant="h4"
              sx={{
                lineHeight: '1.235',
              }}
            >
              {name}
            </Typography>
            <Box display="flex" alignItems="center" sx={{ mt: 2 }}>
              <Typography
                color="textSecondary"
                display="flex"
                alignItems="center"
                sx={{
                  color: (theme) => theme.palette.grey.A200,
                  mr: 1
                }}
              >
                <FeatherIcon icon="mail" width="18" />
              </Typography>
              <Typography color="textSecondary" variant="h6">
                {email}
              </Typography>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

export default ProfileDropdown;
