---
import { getCollection } from "astro:content";
import PostItem from "./PostItem.astro";
import { getLangFromUrl } from "@/i18n";

const lang = getLangFromUrl(Astro.url);
const allPosts = await getCollection("blog");

const sortedPosts = [...allPosts].sort(
  (a, b) =>
    new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime(),
);

const filteredPosts = sortedPosts.filter((post: any) => {
  const postLang = post.id.split("/")[0];
  return postLang === lang;
});

const latestPosts = filteredPosts.slice(0, 5);
---

<ul>
  {
    latestPosts.map((post: any) => {
      const formattedDate = new Date(post.data.pubDate)
        .toISOString()
        .split("T")[0];

      const [postLang, ...slugParts] = post.id.split("/");
      const slug = slugParts.join("/");

      return (
        <PostItem
          url={`/${postLang}/posts/${slug}/`}
          postPath={`/posts/${slug}/`}
          title={post.data.title}
          description={post.data.description}
          date={formattedDate}
          img={post.data.image.url}
        />
      );
    })
  }
</ul>

<div class="more-link-wrap">
  <a href={`/${lang}/timeline`} class="more-link">
    {lang === "zh" ? ">>>更多" : ">>>More"}
  </a>
</div>

<style>
  ul {
    margin: 0;
    padding-left: 0;
  }

  .more-link-wrap {
    margin-top: 1rem;
    text-align: right;
  }

  .more-link {
    color: #6f8090;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.14rem;
  }

  .more-link:hover {
    text-decoration: underline;
  }

  :global(.dark) .more-link {
    color: #aab7c4;
  }
</style>