text: import React, { useState } from "react";
  import { usePostStyles } from "../../styles";
  import UserCard from "../shared/UserCard";
  import {
    MoreIcon,
    ShareIcon,
    LikeIcon,
    CommentIcon,
    UnlikeIcon,
    SaveIcon,
    RemoveIcon,
  } from "../../icons";
  import { Link } from "react-router-dom";
  import {
    Button,
    Typography,
    Hidden,
    Divider,
    TextField,
  } from "@material-ui/core";
  import OptionsDialog from "../shared/OptionsDialog";
  import { defaultPost } from "../../data";
  import PostSkeleton from "../post/PostSkeleton";
  
  function Post() {
    const classes = usePostStyles();
    const [toggleOptions, setToggleOptions] = useState(false);
    const { id, likes, media, user, caption, comments } = defaultPost;
    const [loading, setLoading] = useState(true);
  
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  
    if (loading) {
      return <PostSkeleton />;
    }
  
    function handleToggleOptions() {
      setToggleOptions(true);
    }
  
    return (
      <div className={classes.postContainer}>
        <article className={classes.article}>
          <div className={classes.postHeader}>
            <UserCard user={user} avatarSize={32} />
            <MoreIcon
              onClick={handleToggleOptions}
              className={classes.MoreIcon}
            />
          </div>
          <div className={classes.postImage}>
            <img src={media} alt="Post media" className={classes.image} />
          </div>
          <div className={classes.postButtonsWrapper}>
            <div className={classes.postButtons}>
              <LikeButton likes={likes} />
              <Link to={`/p/:${id}`}>
                <CommentIcon />
              </Link>
              <ShareIcon />
              <SaveButton />
            </div>
            <Typography className={classes.likes} variant="subtitle2">
              <span>{likes === 1 ? "1 like" : `${likes} likes`}</span>
            </Typography>
            <div className={classes.postCaptionContainer}>
              <Typography
                variant="body2"
                component="span"
                className={classes.postCaption}
                dangerouslySetInnerHTML={{ __html: caption }}
              />
              {comments.map((comment) => (
                <div key={comment.id}>
                  <Link to={`/${comment.user.username}`}>
                    <Typography
                      variant="subtitle2"
                      component="span"
                      className={classes.commentUsername}
                    >
                      {comment.user.username}
                    </Typography>{" "}
                    <Typography variant="body2" component="span">
                      {comment.content}
                    </Typography>
                  </Link>
                </div>
              ))}
            </div>
            <Typography color="textSecondary" className={classes.datePosted}>
              8 HOURS AGO
            </Typography>
            <Hidden xsDown>
              <div className={classes.comment}>
                <Divider />
                <Comment />
              </div>
            </Hidden>
          </div>
        </article>
  
        {toggleOptions && (
          <OptionsDialog id={id} onClose={() => setToggleOptions(false)} />
        )}
      </div>
    );
  }
  
  function LikeButton() {
    const classes = usePostStyles();
    const [liked, setLiked] = useState(false);
    const Icon = liked ? UnlikeIcon : LikeIcon;
  
    const className = liked ? classes.liked : classes.like;
    const onClick = liked ? handleUnlike : handleLike;
  
    function handleLike() {
      setLiked(true);
    }
  
    function handleUnlike() {
      setLiked(false);
    }
  
    return <Icon className={className} onClick={onClick} />;
  }
  
  function SaveButton() {
    const classes = usePostStyles();
    const [saved, setSaved] = useState(false);
    const Icon = saved ? RemoveIcon : SaveIcon;
    const onClick = saved ? handleRemove : handleSave;
  
    function handleSave() {
      setSaved(true);
    }
  
    function handleRemove() {
      setSaved(false);
    }
  
    return <Icon className={classes.saveIcon} onClick={onClick} />;
  }
  
  function Comment() {
    const classes = usePostStyles();
    const [content, setContent] = useState("");
  
    return (
      <div className={classes.commentContainer}>
        <TextField
          fullWidth
          value={content}
          placeholder="Add a comment..."
          multiline
          rowsMax={2}
          rows={1}
          onChange={(e) => setContent(e.target.value)}
          className={classes.textField}
          InputProps={{
            classes: {
              root: classes.root,
              underline: classes.underline,
            },
          }}
        />
        <Button
          color="primary"
          className={classes.commentButton}
          disabled={!content.trim()}
        >
          Post
        </Button>
      </div>
    );
  }
  
  export default Post;
  