---
import Layout from "@/layouts/Layout.astro";
import LinkButton from "@/components/link-button";
import { getCollection } from "astro:content";
import PostItem from "@/components/post-item";
import { sortContentByDate } from "@/utils/sorts";

const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
sortContentByDate(allPosts);
const last3Blogs = allPosts.slice(0, 3);

const allProjects = await getCollection(
    "portfolio",
    ({ data }) => data.draft !== true,
);
sortContentByDate(allProjects);
const last3Projects = allProjects.slice(0, 3);
---

<Layout title="juancmandev" description="Welcome to my domain, stranger.">
    <div class="space-y-16">
        <section class="flex flex-col items-start gap-5">
            <div class="space-y-1">
                <h1 class="text-3xl font-bold text-primary">
                    Welcome to my domain, stranger.
                </h1>
                <h2 class="text-xl">
                    I am <span class="font-semibold text-primary"
                        >juancmandev</span
                    >.
                </h2>
                <p class="text-lg font-light">
                    I like computers, and all stuff related to technology.
                </p>
                <p class="text-lg font-light">
                    Take a seat, drink some tea, and enjoy your stay.
                </p>
            </div>
        </section>
        <section>
            <h2 class="text-3xl">Latest posts</h2>
            <ul class="mt-4 flex flex-col gap-4">
                {
                    last3Blogs.map((blogpost: any) => (
                        <li>
                            <PostItem
                                type="blog"
                                slug={blogpost.slug}
                                date={blogpost.data.date!}
                                title={blogpost.data.title!}
                            />
                        </li>
                    ))
                }
            </ul>
            <LinkButton variant="secondary" href="/blog" className="mt-8"
                >More posts</LinkButton
            >
        </section>
        <section>
            <h2 class="text-3xl">Latest projects</h2>
            <ul class="mt-4 flex flex-col gap-4">
                {
                    last3Projects.map((project: any) => (
                        <li>
                            <PostItem
                                type="portfolio"
                                slug={project.slug}
                                date={project.data.date!}
                                title={project.data.title!}
                            />
                        </li>
                    ))
                }
            </ul>
            <LinkButton variant="secondary" href="/portfolio" className="mt-8"
                >More projects</LinkButton
            >
        </section>
    </div>
</Layout>