export const title = "Blog";
export const description = "Hello, my friend. Stay a while and listen.";
export const nav_icon = "https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/news.svg";

export default function({ nav }) {
  const sortPosts = (a,b) => {
    if (a.data.date < b.data.date) {
      return 1;
    } else if (a.data.date > b.data.date) {
      return -1;
    } else {
      return 0;
    }
  };

  if (!nav.menu("/blog/posts")) {
    return (
      <div className="no-posts">
        <img src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/square-0-filled.svg" className="icon"/>
        <h2>No posts yet.<br/>Check back later.</h2>
      </div>
    );
  }

  return (
    <ul className="post-list">
      {nav.menu("/blog/posts").children.sort(sortPosts).map(post => (
        <li className="post-list-item">
          <a href={post.data.url} className="post-list-title">{post.data.title}</a>
          <time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(post.data.date)}</time>
          <ul className="tag-list">
            {post.data.tags.map(tag => <li className="tag">{tag}</li>)}
          </ul>
          <p className="post-list-description">{post.data.description}</p>
        </li>
      ))}
    </ul>
  );
}