text: import React from "react";
  import PropTypes from "prop-types";
  import injectSheet from "react-jss";
  
  import TagList from "../Tags/TagList";
  
  const styles = theme => ({
    header: {
      margin: "0 0 3em"
    },
    title: {
      color: theme.main.colors.title,
      fontSize: `${theme.main.fonts.title.size}em`,
      letterSpacing: "-0.04em",
      fontWeight: theme.main.fonts.title.weight,
      lineHeight: theme.main.fonts.title.lineHeight,
      margin: "0 0 0.4em",
      [`@media (min-width: ${theme.mediaQueryTresholds.M}px)`]: {
        fontSize: `${theme.main.fonts.title.sizeM}em`
      },
      [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
        fontSize: `${theme.main.fonts.title.sizeL}em`,
        letterSpacing: "-0.05em"
      }
    },
    subTitle: {
      color: theme.main.colors.subTitle,
      fontSize: `${theme.main.fonts.subTitle.size}em`,
      lineHeight: theme.main.fonts.subTitle.lineHeight,
      fontWeight: theme.main.fonts.subTitle.weight,
      [`@media (min-width: ${theme.mediaQueryTresholds.M}px)`]: {
        fontSize: `${theme.main.fonts.subTitle.sizeM}em`
      },
      [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
        fontSize: `${theme.main.fonts.subTitle.sizeL}em`
      }
    },
    meta: {
      fontSize: `${theme.main.fonts.meta.size}em`,
      fontWeight: theme.main.fonts.meta.weight,
      color: theme.main.colors.meta
    }
  });
  
  const PostHeader = props => {
    const { classes, title, subTitle, date, postAuthor, tags } = props;
  
    function myDate(dateString) {
      const dateObj = new Date(dateString);
      const dateToShow = dateObj.toDateString();
  
      return dateToShow;
    }
  
    return (
      <header className={classes.header}>
        <h1 className={classes.title}>{title}</h1>
        {subTitle && <h2 className={classes.subTitle}>{subTitle}</h2>}
        <h4 className={postAuthor}>Author: {postAuthor}</h4>
        <div className={classes.meta}>{myDate(date)}</div>
        <TagList tags={tags} />
      </header>
    );
  };
  
  PostHeader.propTypes = {
    classes: PropTypes.object.isRequired,
    title: PropTypes.string.isRequired,
    subTitle: PropTypes.string,
    postAuthor: PropTypes.string,
    tags: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.string.isRequired,
        totalCount: PropTypes.number.isRequired,
      }).isRequired
    ).isRequired,
    date: PropTypes.string.isRequired
  };
  
  export default injectSheet(styles)(PostHeader);
  