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 NoteHeader = ({ post }) => (
  <Alert colour='blue'
    title={<span><Emoji e='📔' n='Notebook' /> <Link to={post.fields.slug}>{post.frontmatter.title}</Link> <small>(last updated {moment(post.frontmatter.date).format('D MMMM YYYY')})</small></span>}>
    <p>{post.frontmatter.description}</p>
    {post.frontmatter.tags && post.frontmatter.tags.map(tag => <Tag key={tag} tag={tag} />)}
  </Alert>
);

export default NoteHeader;
