Untitled

const Comment = ({parent=null, comments}) => {
  const { user } = useAuth()
  const [reply, setReply] = useState(false)
  const [edit, setEidt] = useState(false)
  const [replyText, setReplyText] = useState('')
  
  return (
    <div className='comment-outer-container'>
      {comments.map((comment, i) => {
        return (
          <div key={i} className='comment-inner-container'>
            <div className='comment-details'>
              <div className='flex space-between align-items-center'>
                {comment.author_name}
                <div>
                  <span className="material-symbols-outlined">more_vert</span>
                </div>
              </div>
              {
                parent && <div className='replying-to'> 
                  <p>Replying to {parent.author_name}</p>
                  <p>"{parent.text.slice(0, 100)}..."</p>
                </div>
              }
              
                {edit ? <CommentEditor onChange={(e) => setReplyText(e.target.value)} value={comment.text}/> : 
                <div className='comment-text'>
                  {comment.text} 
                </div>}
              {
                reply && <div className='comment-reply'>
                  <CommentEditor onChange={(e) => setReplyText(e.target.value)}/>
                </div>
              }
              <div className='flex'>
                <button className='comment-btn-primary reply-btn' onClick={() => setReply(!reply)}>
                  <span className="material-symbols-outlined">reply</span>
                  Reply
                </button>
              </div>
            </div>
            <div>
              {comment.children.length > 0 &&
                <Comment className='comment-replies' parent={comment} comments={comment.children} />
              }
            </div>
          </div>
        )
      })}
    </div>
  )
}