import React from "react";
import styled from "styled-components";
import Comment from "./Comment";

const StyledUl = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
`;

const CommentList = ({ comments, className }) => (
  <StyledUl className={className}>
    {comments.map((comment) => (
      <li key={comment.objectID}>
        <Comment comment={comment} />
      </li>
    ))}
  </StyledUl>
);

export default CommentList;