import React from 'react'
import { Link } from 'gatsby'
import moment from 'moment';
import Emoji from './Emoji';

const BlogPostHeader = ({ post }) => (

  <div style={{marginBottom: '1.45rem', background: 'floralwhite', padding: 3, borderRadius: 3}}>
    <h3><Emoji e='📝' /> <Link to={post.fields.slug}>{post.frontmatter.title}</Link> <small>{moment(post.frontmatter.date).format('D MMMM YYYY')}</small></h3>
    <p><em>{post.excerpt}</em></p>
    {post.frontmatter.tags && post.frontmatter.tags.map(tag => 
      <Link style={{marginRight: 10}} to={`/tags/${tag}`}><Emoji e="🏷️" /> #{tag}</Link>
    )}
  </div>
)

export default BlogPostHeader;
