---
import Date from "@components/organisms/Date.astro";
import KeywordsList from "@components/organisms/KeywordsList.astro";
import { getFirstUserID, getLastUpdate } from "@lib/collection/helpers";
import type { Micro, MicroEntry } from "@lib/collection/schemas";

interface Props extends MicroEntry {}

const micro = Astro.props;
const { id, data, rendered } = micro;
const { title, lang, keywords } = data;
const date = getLastUpdate(micro);
const user = await getFirstUserID(micro);
const display = user?.name ?? user?.email ?? user?.entity ?? "";
const [first, ...names] = display.split(/\s/);
const last = names.length > 0 ? names[names.length - 1] : "";
const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2);
---
<article
  itemprop="blogPost"
  itemscope
  itemtype="https://schema.org/BlogPosting"
>
  <header>
    <h3 class="title">
      <a href={`/blog/read/${id}`} itemprop="headline name">{title}</a>
    </h3>
    <span class="profile_picture">{
      user?.website ? <a href={user.website}>{little}</a> : (
        <span>{little}</span>
      )
    }</span>
    <div>
      <span
        itemprop="author"
        itemscope
        itemtype="https://schema.org/Person"
      ><span itemprop="alternateName">{first} {last}</span></span>
      <span class="small">· <Date
          {date}
          locales={lang}
          options={{ month: "short", day: "numeric" }}
          itemprop="dateModified"
        /></span>
    </div>
  </header>
  <div class="content small">
    <div {lang} itemprop="articleBody text">
      <Fragment set:html={rendered?.html} />
    </div>
    <footer>
      <div class="keywords"><KeywordsList {keywords} /></div>
    </footer>
  </div>
  <aside>
    <small><a href="/blog/micro/1">Ver todos os microposts</a></small>
  </aside>
</article>

<style>
  article {
    border-radius: calc(var(--size-1) * 1em);
    box-shadow: 0 0 calc(var(--size-1) * 1em) var(--color-light);
    padding: calc(var(--size-4) * 1em);
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: calc(var(--size-9) * 1em) auto;
    gap: calc(var(--size-1) * 1em);

    & > header {
      display: contents;
    }

    & > aside {
      grid-row: 3 / 4;
      grid-column: 1 / 3;
      border-block-start: 1px solid #e7e7e7;
      padding-block-start: calc(var(--size-1) * 1em);
    }
  }

  .profile_picture {
    grid-row: 1 / 3;
    grid-column: 1 / 2;

    & > * {
      display: inline-grid;
      place-content: center;
      width: calc(var(--size-9) * 1em);
      height: calc(var(--size-9) * 1em);
      aspect-ratio: 1 / 1;
      background-color: var(--color-active);
      color: #fff;
      font-weight: 950;
      font-size: smaller;
      border-radius: calc(infinity * 1px);
      text-align: center;
      text-transform: uppercase;
    }
  }

  .title {
    display: none;
  }
  .content {
    grid-row: 2/3;
    grid-column: 2 / 3;
    & > [lang] > :global(*:first-child) {
      margin-block-start: 0;
    }
    & > [lang] > :global(*:last-child) {
      margin-block-end: 0;
    }
  }

  .keywords {
    margin-block-end: 0;
  }
</style>