import { Person } from '@mui/icons-material';
import { Avatar, Box, Button, Card, CardActions, CardContent, Grid, Typography } from '@mui/material';
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { User } from '../../types/User';
import convertDate from '../../utils/date';

interface Props {
  user: User;
  canEdit?: boolean;
}

const Profile: FC<Props> = ({ user, canEdit }) => {
  const { t } = useTranslation();

  return (
    <Card>
      <CardContent>
        <Grid container spacing={2}>
          <Grid item sx={{ display: 'flex', flexGrow: 1, justifyContent: 'center' }}>
            <Avatar alt={user.username} src={`storage/${user.image}`} sx={{ width: '100px', height: '100px' }}>
              <Person sx={{ width: '60px', height: '60px' }} />
            </Avatar>
          </Grid>
          <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
            <Box sx={{ display: 'grid', gridTemplateColumns: '120px 1fr', columnGap: 1 }}>
              <Typography fontWeight="bold">{t('Username')}:</Typography>
              <Typography>{user.username}</Typography>
              <Typography fontWeight="bold">{t('Email')}:</Typography>
              <Typography>{user.email}</Typography>
              <Typography fontWeight="bold">{t('Member since')}:</Typography>
              <Typography>{convertDate(user.memberSince)}</Typography>
              <Typography fontWeight="bold">{t('Post count')}:</Typography>
              <Typography>{user.postCount}</Typography>
            </Box>
          </Grid>
        </Grid>
      </CardContent>
      <CardActions>{canEdit && <Button size="small">{t('Edit')}</Button>}</CardActions>
    </Card>
  );
};

export default Profile;