---
import BaseLayout from "../layouts/BaseLayout.astro";

import { getCollection, getEntry } from "astro:content";

const allPosts = (await getCollection("posts")).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);

function formatDate(dateString: string) {
  const date = new Date(dateString);
  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

import { Icon } from "astro-icon/components";
---

<BaseLayout title="Posts | Samvid Konchada">
  <div>
    <div class="header">
      <h1>Posts</h1>
      <div
        style="display: flex; align-items: center; margin-bottom: 1rem; gap: 0.25rem;"
      >
        <Icon name="lucide:rss" />
        <a
          style="margin: 0;"
          href="/rss.xml"
          target="_blank"
          rel="noopener noreferrer"
        >
          Subscribe via RSS
        </a>
      </div>
    </div>

    <div class="posts">
      {
        allPosts.map((post) => (
          <div class="post">
            <h4 style=" margin: 0;  font-size: 1.1rem;">
              <a href={`/posts/${post.id}`}>{post.data.title}</a>
            </h4>
            <div style="display: flex; align-items: center; gap: 0.25rem; padding-top: 0.2rem; padding-bottom: 0.15rem; font-size: 0.9rem;">
              <Icon name="lucide:calendar" />
              <p style="margin: 0;">
                {formatDate(post.data.pubDate.toString())}
              </p>
            </div>
            <p style="margin: 0;">{post.data.description}</p>
          </div>
        ))
      }
    </div>
  </div>
</BaseLayout>

<style>
  .header {
    h1 {
      margin-bottom: 0.25rem;
    }
    a {
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  }

  .post {
    margin-top: 1.5rem;

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  }
</style>
