import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Attachment from './components/Attachment';
import Abstract from './components/Abstract';

const Container = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #cfd7df;
`;

const PostMedia = ({ post }) => {
  const hasThumbnail = post.media && post.media.thumbnail;
  return (
    <Container>
      {hasThumbnail && <Attachment type={post.type} media={post.media} />}
      {!hasThumbnail && <Abstract text={post.text} />}
    </Container>
  );
};

PostMedia.propTypes = {
  post: PropTypes.shape({
    media: PropTypes.shape({
      thumbnail: PropTypes.String,
      picture: PropTypes.String,
    }),
    text: PropTypes.string,
    type: PropTypes.string,
  }).isRequired,
};

export default PostMedia;