text: import React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import moment from 'moment';
  import { makeStyles } from '@material-ui/styles';
  import {
    Card,
    CardActions,
    CardContent,
    Avatar,
    Typography,
    Divider,
    Button,
    LinearProgress
  } from '@material-ui/core';
  
  const useStyles = makeStyles(theme => ({
    root: {},
    details: {
      display: 'flex'
    },
    avatar: {
      marginLeft: 'auto',
      height: 110,
      width: 100,
      flexShrink: 0,
      flexGrow: 0
    },
    progress: {
      marginTop: theme.spacing(2)
    },
    uploadButton: {
      marginRight: theme.spacing(2)
    }
  }));
  
  const AccountProfile = props => {
    const { className, ...rest } = props;
  
    const classes = useStyles();
  
    const user = {
      name: 'SF',
      city: 'NITTE',
      country: 'IND',
      timezone: 'GTM+05:30',
      // avatar: '/images/avatars/avatar_11.png'
    };
  
    return (
      <Card
        {...rest}
        className={clsx(classes.root, className)}
      >
        <CardContent>
          <div className={classes.details}>
            <div>
              <Typography
                gutterBottom
                variant="h2"
              >
                asfaf
              </Typography>
              <Typography
                className={classes.locationText}
                color="textSecondary"
                variant="body1"
              >
                {user.city}, {user.country}
              </Typography>
              <Typography
                className={classes.dateText}
                color="textSecondary"
                variant="body1"
              >
                {moment().format('hh:mm A')} ({user.timezone})
              </Typography>
            </div>
  
          </div>
          <div className={classes.progress}>
            <Typography variant="body1">Profile Completeness: 90%</Typography>
            <LinearProgress
              value={90}
              variant="determinate"
            />
          </div>
        </CardContent>
        <Divider />
        <CardActions>
        </CardActions>
      </Card>
    );
  };
  
  AccountProfile.propTypes = {
    className: PropTypes.string
  };
  
  export default AccountProfile;
  