content: import React from 'react';
  import { MdLaunch } from 'react-icons/md';
  
  import Typography from './Typography';
  
  const RedditPost = ({ post }) => (
    <div className="reddit-post">
      <div className="reddit-post-content">
        <Typography is="h4" className="reddit-post-title" style={{ margin: 0 }}>
          <a
            href={post.data.url}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={post.data.title}
          >
            {post.data.title}
          </a>
        </Typography>
        <p className="reddit-post-subreddit">
          {post.data.subreddit_name_prefixed}
        </p>
      </div>
      <a
        href={post.data.url}
        target="_blank"
        rel="noopener noreferrer"
        className="reddit-post-link"
        aria-label={post.data.title}
      >
        <MdLaunch />
      </a>
      <style jsx>{`
        .reddit-post {
          display: flex;
          justify-content: space-between;
        }
  
        .reddit-post-link {
          margin-left: 16px;
        }
  
        .reddit-post-subreddit {
          font-size: 14px;
          margin: 0;
        }
      `}</style>
    </div>
  );
  
  export default RedditPost;
  