---
import Layout from "../layouts/Layout.astro";
import type { Post } from "../types";

const posts: Post[] = (
  await (await fetch("http://payload:3001/api/posts")).json()
).docs;
posts.forEach((post) => console.log(post.title));
---

<Layout title="Welcome to Astroad">
  <main class="flex flex-col items-center py-10 gap-5">
    <h1>This is Astroad</h1>
    {
      posts ? (
        posts.reverse().map((post) => (
          <a href={`/posts/${post.id}`}>
            <article class="text-teal-950 bg-yellow-100 px-5 py-3 rounded-md shadow-md w-64 text-center">
              <h2>{post.title}</h2>
              <p>{new Date(post.updatedAt).toLocaleDateString("de-DE")}</p>
            </article>
          </a>
        ))
      ) : (
        <p>No posts...</p>
      )
    }
  </main>
</Layout>