text: import { Card, Icon, Button, Label, Image } from 'semantic-ui-react';
  import { Link } from 'react-router-dom';
  import moment from 'moment';
  import { useContext } from 'react';
  import { AuthContext } from '../context/auth';
  import LikeButton from './LikeButton';
  import DeleteButton from './DeleteButton';
  import Popup from './Popup';
  
  function PostCard({ post = {} }) {
      const { body, createdAt, id, username, likeCount, commentCount, likes } = post;
      const { user } = useContext(AuthContext);
  
      return (
          <Card fluid>
              <Card.Content>
                  <Image
                      floated='right'
                      size='mini'
                      src='https://react.semantic-ui.com/images/avatar/large/jenny.jpg'
                  />
                  <Card.Header>{username}</Card.Header>
                  <Card.Meta as={Link} to={`/posts/${id}`}>{moment(createdAt).fromNow()}</Card.Meta>
                  <Card.Description>
                      {body}
                  </Card.Description>
              </Card.Content>
              <Card.Content extra>
                  <LikeButton post={{ id, likes, likeCount }} user={user} />
                  <Popup content="Comment on post">
                      <Button labelPosition='right' as={Link} to={`/posts/${id}`}>
                          <Button color='blue' basic>
                              <Icon name='comments' />
                          </Button>
                          <Label basic color='blue' pointing='left'>
                              {commentCount}
                          </Label>
                      </Button>
                  </Popup>
                  {user && user.username === username &&
                      (
                          <DeleteButton post={{ id }} />
                      )}
              </Card.Content>
          </Card>
      )
  }
  
  export default PostCard
  