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

interface Props {
  micro: MicroEntry;
  seeAll?: boolean;
}

const { micro, seeAll = false } = 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"
  style={`--rows: ${seeAll ? 3 : 2};`}
>
  <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"
        /> (<RelativeTime
          {date}
          locales={lang}
          options={{
            style: "short",
            numeric: "auto",
          }}
        />)</span>
    </div>
    <span class="lang mute">{lang}</span>
  </header>
  <div class="content small">
    <div {lang} itemprop="articleBody text">
      <Fragment set:html={rendered?.html} />
    </div>
    <footer>
      <a href={`/blog/read/${id}`}>Ver mais...</a>
      <div class="keywords"><KeywordsList {keywords} /></div>
    </footer>
  </div>
  {
    seeAll && (
      <aside>
        <small><a href="/blog/micro/1">Ver todos os microposts</a></small>
      </aside>
    )
  }
</article>

<style>
  article {
    --rows: 2 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(var(--rows), auto);
    grid-template-columns: calc(var(--size-9) * 1em) repeat(2, auto);
    gap: calc(var(--size-1) * 1em);

    & > header {
      display: contents;
    }

    & > aside {
      grid-row: 3 / 4;
      grid-column: 1 / 4;
      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); */
      border-radius: calc(var(--size-3) * 1em);
      text-align: center;
      text-transform: uppercase;
    }
  }

  .title {
    display: none;
  }

  .lang {
    grid-row: 1/2;
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
  }

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

    & > footer {
      display: flex;
      gap: 1em;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
    }
  }

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