import Link from 'next/link';
import ta from 'time-ago';
import {
  string,
  bool
} from 'prop-types';

const PostLink = ({ href, date, lang, download, children }) => {
  const link = (
    <div className="post">
      {
        date && (
          <span className="post-date">{
            `${ta.ago(date)} (${date})`
          }</span>
        )
      }
      <a href={ href } title={ children } download={ download } className="post-title">
        {
          lang && `(${lang}) `
        }
        { children }
      </a>

      <style jsx global>{`
        .post-date {
          color: #757575;
          display: block;
          font-size: 16px;
          margin-bottom: 2px;
        }
        .post-title {
          font-size: 17px;
        }
      `}</style>
    </div>
  );

  if (download) {
    return link;
  }

  return (
    <Link href={ href }>
      { link }
    </Link>
  );
};

PostLink.propTypes = {
  href: string.isRequired,
  date: string,
  lang: string,
  download: bool
};

PostLink.defaultProps = {
  download: false
};

export default PostLink;