---

import { compareDesc, format } from 'date-fns'
import { toZonedTime } from 'date-fns-tz'
import { timeZone } from "../lib/utils";

import BaseLayout from '../layouts/BaseLayout.astro';

import HR from "../components/HR.astro"

import { getCollection } from 'astro:content';

const posts = await getCollection('posts');
const archives = await getCollection('archives');

---

<BaseLayout title="archives">
	<h1 class="font-serif text-3xl my-2">Blog Archive</h2>
  <p>This is a list of all blog posts that have ever been posted on this site.</p>
  
  <h2 class="text-2xl font-serif text-crusta-600 dark:text-night-200 my-2">current content</h2>
  <ul class="space-y-2">
    {posts.sort((a, b) => compareDesc(new Date(a.data.date), new Date(b.data.date))).map((post) => {
      if (post.data.draft) return;
      console.log(toZonedTime(post.data.date, timeZone));
      return (
        <li>
          <a href={'/posts/' + post.slug} class="font-serif text-lg text-crusta-400 dark:text-night-300 hover:underline">{post.data.title}</a>
          &emsp;<span class="font-mono text-md">{format(toZonedTime(post.data.date, timeZone), 'LLL d, yyyy')}</span>
          <p>{post.data.summary}</p>
        </li>
      );
    })}
  </ul>

  <HR/>

  <h2 class="text-2xl font-serif text-crusta-600 dark:text-night-200 my-2">archived content</h2>
  <p class="mb-2">I have a lot of old posts from multiple different iterations of my blog. If I come across one I think is still neat, I may put it here.<br/>
  Please check the date of publication before making any comments.</p>

  <ul class="space-y-2">
    {archives.sort((a, b) => compareDesc(new Date(a.data.date), new Date(b.data.date))).map((post) => {
      if (post.data.draft) return;
      console.log(toZonedTime(post.data.date, timeZone));
      return (
        <li>
          <a href={'/archives/' + post.slug} class="font-serif text-lg text-crusta-400 dark:text-night-300 hover:underline">{post.data.title}</a>
          &emsp;<span class="font-mono text-md">{format(toZonedTime(post.data.date, timeZone), 'LLL d, yyyy')}</span>
          <p>{post.data.summary}</p>
        </li>
      );
    })}
  </ul>
</BaseLayout>