import React from 'react';

export default function CommentList({loading, comments, totalCount}) {
  if (loading) {
    return <div>empty</div>;
  }

  if (comments.length === 0) {
    return <div>loading</div>;
  }

  return (
    <CommentListDiv>
      {comments.map(({text, author: {name, avatar}}) => (
        <CommentItemDiv>
          <AvatarDiv><AvatarImg src={avatar} /></AvatarDiv>
          <MessageDiv>
            <AuthorSpan><LinkTo href=`/character/${item.id}`>{name}</LinkTo></AuthorSpan>
            <TextSpan>{text}</TextSpan>
          </MessageDiv>
        </CommentItemDiv>
      ))}
    </CommentListDiv>
  );
}