---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import { getUnixTime } from "date-fns";
import GalleryLayout from "../layouts/GalleryLayout.astro";

const stories = (await getCollection("stories"))
  .filter((story) => !story.data.isDraft)
  .sort((a, b) => getUnixTime(b.data.pubDate) - getUnixTime(a.data.pubDate));
---

<GalleryLayout pageTitle="Stories">
  <h1>Stories</h1>
  <p>Lorem ipsum.</p>
  <ul>
    {
      stories.map((story) => (
        <li>
          <a href={`/stories/${story.slug}`}>
            {story.data.thumbnail && (
              <Image
                src={story.data.thumbnail}
                alt={`Thumbnail for ${story.data.title}`}
                width={story.data.thumbnailWidth}
                height={story.data.thumbnailHeight}
              />
            )}
            <span>
              {story.data.pubDate} - {story.data.title}
            </span>
          </a>
        </li>
      ))
    }
  </ul>
</GalleryLayout>