---
import Layout from "@/layouts/Layout.astro";
import { getPosts } from "@/utils/payload";

const posts = await getPosts();
---

<Layout title="Astroad">
  <main class="" >
    <h1 class="font-bold text-5xl">Astroad</h1>
    <p class="mt-3 text-lg">
      Astroad is a pre-configured setup for Astro and Payloadcms that makes it
      easy to get started with building your website. With Astroad, you'll have
      a complete development environment that you can run locally using Docker.
      This makes it easy to test and develop your website before deploying it to
      a production environment.
      <br />
       When you're ready to deploy the website on your own server, Astrotus
      comes with a production environment that requires the use of Traefik as a
      reverse proxy. This setup provides a secure and scalable production
      environment for your website.
    </p>
    <h2 class="mt-6 font-bold text-2xl">Posts</h2>
    <div class="flex gap-4 mt-3 flex-wrap">
      {
        posts.length > 0 ? (
          posts.map((post) => (
            <a href={`/posts/${post.id}/`} rel="prefetch">
              <article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
                <h3 class="font-bold text-lg" transition:name=`title-${post.id}`>{post.title}</h3>
                {post.publishedDate && (
                  <p>
                    {new Date(post.publishedDate).toLocaleDateString("de-DE")}
                  </p>
                )}
              </article>
            </a>
          ))
        ) : (
          <p>Add Posts in Payloadcms</p>
        )
      }
    </div>
  </main>
</Layout>