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

interface Props {
  posts: CollectionEntry<"blog">[];
  small?: boolean;
  dateOptions?: Intl.DateTimeFormatOptions;
}

const {
  posts,
  small = false,
  dateOptions = { year: "numeric", month: "long", day: "numeric" },
} = Astro.props;
---
<ol class:list={{ "remove-nums": !small }}>
  {
    await Promise.all(
      posts.map(
        async (post) => {
          const { id, data } = post;
          const { title, lang } = data;
          const description = isMicro(post)
            ? post.rendered?.html
            : ("description" in data ? data.description : undefined);
          const keywords = isTranslation(post)
            ? await getTranslationOriginal(post).then((x) =>
              x?.data?.keywords
            )
            : ("keywords" in data ? data.keywords : undefined);
          const { name, email, entity } = await getFirstUserID(post);
          const display = name ?? email ?? entity;
          return (
      <li>
        <article
          itemprop="blogPost"
          itemscope
          itemtype="https://schema.org/BlogPosting"
        >
          <h3>
            <a href={`/blog/read/${id}`} itemprop="headline name">{title}</a>
          </h3>
          {
            description && (
              <div itemprop="abstract">
                {
                  isMicro(post)
                    ? <Fragment set:html={description} />
                  : description.split("\n\n").map((
                    paragraph,
                  ) => <p class:list={{ small }}>{paragraph}</p>)
                }
              </div>
            )
          }

          <footer class="small">
            <Date
              date={getLastUpdate(post)}
              locales={lang}
              options={dateOptions}
              itemprop="dateModified"
            /><span
              itemprop="author"
              itemscope
              itemtype="https://schema.org/Person"
            ><span itemprop="alternateName">{display}</span></span>
            {Array.isArray(keywords) && <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);

        & > [itemprop="abstract"] > p:not(:first-of-type) {
          margin-block-start: 1.5em;
        }

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

    & > li:not(:first-of-type) {
      border-block-start: 1px solid var(--color-dark);
    }
  }

  ol.remove-nums {
    margin-inline-start: 0;
    & > li {
      margin-inline-end: calc(var(--size-7) * 1em);
      & > article {
        padding-inline-end: 0;
      }
    }
  }

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