import React from "react";
import Modal from "@bufferapp/ui/Modal";
import Carousel from "@bufferapp/ui/Carousel";
import { Card } from "./components/Card";

const ContentModal = ({ posts, closeModal }) => {
  let allPosts = 0
  posts.map(post => {
    if (post.details.length >= 1){
      allPosts = allPosts + post.details.length
    }
  })
  return (
    <Modal
      width="1100px"
      closeButton={{ callback: () => closeModal() }}
      noBackground
    >
      <div style={allPosts === 1 ? {margin: '0 50px'} : {}}>
        <Carousel width="1000px">
          {posts.map(post =>
            post.details.map(singlePost => (
              <Card post={singlePost} key={post.id} />
            ))
          )}
        </Carousel>
      </div>
    </Modal>
  );
};

export default ContentModal;