---
import { getCollection } from "astro:content";
import { Image } from "astro:assets"

import Layout from "@/layouts/Layout.astro";
import SocialLinks from "@/components/SocialLinks.astro";
import PostCard from "@/components/PostCard.astro";
import ProjectCard from "@/components/ProjectCard.astro";
import Link from "@/components/shared/Link.astro";
import convertAsteriskToStrongTag from "@/utils/convertAsteriskToStrongTag";

import presentation from "@/data/presentation";
import projects from "@/data/projects";

const posts = (await getCollection("posts")).sort(function (first, second) {
  return second.data.publishedAt.getTime() - first.data.publishedAt.getTime();
});
---

<Layout>
  <main class="flex flex-col gap-20">
    <article
      class="flex flex-col gap-8 md:flex-row-reverse md:justify-end md:gap-12"
    >
      {
        presentation.profile && (
          <Image
            src={presentation.profile}
            class="w-1/4 self-center rounded-full"
            alt="Your Profile"
            width="200"
            height="200"
          />
        )
      }

      <div class="flex flex-col gap-8">
        <h1 class="text-3xl text-neutral-100">
          {presentation.title}
        </h1>

        <h2
          class="w-auto max-w-screen-sm leading-6"
          set:html={convertAsteriskToStrongTag(presentation.description)}
        />

        <SocialLinks />
      </div>
    </article>

    <article class="flex flex-col gap-8">
      <header class="flex w-full flex-row justify-between gap-2">
        <h3 class="text-lg text-neutral-100">Latest posts</h3>
        <Link href="/posts" label="See all posts" isUnderline target="_self" />
      </header>
      {posts.length === 0 && <p>Soon, stay connected 👀...</p>}

      <section class="flex flex-col gap-4 md:flex-row md:flex-wrap">
        {
          posts.length !== 0 &&
            posts
              .slice(0, 2)
              .map((post) => (
                <PostCard
                  publishedAt={post.data.publishedAt}
                  title={post.data.title}
                  description={post.data.description}
                  slug={post.slug}
                />
              ))
        }
      </section>
    </article>

    <article class="flex flex-col gap-8">
      <header class="flex w-full flex-row justify-between gap-2">
        <h3 class="text-lg text-neutral-100">
          Selected projects ({projects.length})
        </h3>
      </header>
      {projects.length === 0 && <p>Oops, I must work^^^^^</p>}

      <section class="flex flex-col gap-4">
        {
          projects.length !== 0 &&
            projects.map((project) => <ProjectCard {...project} />)
        }
      </section>
    </article>

    <article class="flex flex-col gap-8">
      <header class="flex w-full flex-row justify-between gap-2">
        <h3 class="text-lg text-neutral-100">Get in touch</h3>
      </header>
      <p>
        Email me at <Link
          href={`mailto:${presentation.mail}`}
          label={presentation.mail}
        /> or follow me via my social links.
      </p>

      <SocialLinks />
    </article>
  </main>
</Layout>