export const title = "Blog";
export const description = "Hello, stranger. Stay a while and listen.";

export default function ({ nav, comp }: Lume.Data) {
  const { PostListItem } = comp;

  if (!nav.menu("/blog/posts")) {
    return (
      <div className="no-posts">
        <img
          src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/coffee.svg"
          className="icon"
          alt=""
        />
        <h2>No posts yet</h2>
        <p>
          Foster is on a coffee break.<br />Check back later.
        </p>
      </div>
    );
  }

  return (
    <ul className="post-list">
      {nav.menu("/blog/posts")?.children?.sort((a, b) => {
        let result = 0;
        if (a.data && b.data) {
          if (a.data.date < b.data.date) {
            result = 1;
          } else if (a.data.date > b.data.date) {
            result = -1;
          }
        }
        return result;
      }).map((post, index) => <PostListItem key={index} post={post} />)}
    </ul>
  );
}