---
import Date from "@components/organisms/Date.astro";
import KeywordsList from "@components/organisms/KeywordsList.astro";
import { getFirstUserID, getLastUpdate } from "@lib/collection/helpers";
import type { Original } from "@lib/collection/schemas";
import type { z } from "astro:content";
import type { CollectionEntry } from "astro:content";

interface Props {
  posts: (CollectionEntry<"blog"> & { data: z.infer<typeof Original> })[];
}

const { posts } = Astro.props;
---
<ol>
  {
    await Promise.all(posts.map(async (post) => {
      const { id, data } = post;
      const { title, description, lang, keywords } = data;
      const { name, email, entity } = await getFirstUserID(post);
      const display = name ?? email ?? entity;
      return (
      <li>
        <article>
          <h3><a href={`/blog/read/${id}`}>{title}</a></h3>
          {
            description &&
              description.split("\n\n").map((paragraph) => (
              <p class="small">{paragraph}</p>
            ))
          }

          <footer class="small">
            <Date
              date={getLastUpdate(post)}
              locales={lang}
              options={{
                year: "numeric",
                month: "long",
                day: "numeric",
              }}
            />{display}
            <KeywordsList {keywords} />
          </footer>
        </article>
      </li>
    );
    }))
  }
</ol>

<style>
  ol {
    margin-inline-start: calc(var(--size-7) * 1em);
    margin-block: calc(var(--size-7) * 1em);
    & > li {
      margin-block-start: calc(var(--size-2) * 1em);
      & > article {
        padding-inline-end: calc(var(--size-9) * 1em);

        & > p:not(:first-of-type) {
          margin-block-start: 1.5em;
        }

        & > footer {
          display: flex;
          flex-direction: column;
          gap: calc(var(--size-1) * 1em);
        }
      }
    }
  }

  @media (width >= 40rem) {
    ol > li > article > footer {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>