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

const BlogPostHeader = ({ post }) => (

  <Alert
    colour='white'
    title={<span><Emoji e='📝' n='Note and pencil'/> <Link to={post.fields.slug}>{post.frontmatter.title}</Link> <small>{moment(post.frontmatter.date).format('D MMMM YYYY')}</small></span>}
  >
    <div>
      <p><em>{post.excerpt}</em></p>
      {post.frontmatter.tags && post.frontmatter.tags.map(tag => <Tag key={tag} tag={tag} />)}
    </div>
  </Alert>
)

export default BlogPostHeader;
