<script lang="ts">
  import ago from '$lib/ago';
  import { now } from '$lib/global-now';
  import { linkAccount } from '$lib/mastoapi/account';

  import {
    linkStatus,
    type MastodonStatus,
    type MastodonStatusContext
  } from '$lib/mastoapi/status';
  import StatusControls from './StatusControls.svelte';

  export let status: MastodonStatus;
  export let focused: boolean = false;
</script>

<article class="status" class:focused>
  <div class="status-content">
    <aside class="status-author">
      <a href={linkAccount(status.account)}>
        <img class="avatar" alt={status.account.acct} src={status.account.avatar_static} />
      </a>
    </aside>

    <div class="status-main">
      <section class="top-line">
        <a href={linkAccount(status.account)} class="author-link">
          <strong class="author-display-name">{status.account.display_name}</strong>
          <span class="author-handle">@{status.account.fqn}</span>
        </a>

        <a class="link-muted" href={linkStatus(status)}>
          <time>{ago(new Date(status.created_at), $now)}</time>
        </a>
      </section>

      <section class="status-body">
        {#if status.spoiler_text}
          <p>[TODO: content warning <q>{status.spoiler_text}</q>]</p>
        {/if}

        {@html status.content}
      </section>

      <section class="status-attachments">
        {#each status.media_attachments as attachment}
          <p>[TODO: attachment <q>{attachment.description || '(no description)'}</q>]</p>
        {/each}
      </section>
    </div>
  </div>

  <StatusControls {status} />
</article>

<style>
  .status {
    background-color: var(--col-bg-1);
    padding: 0.25em;
  }

  .status.focused {
    background-color: var(--col-bg-2);
  }

  .status-content {
    display: flex;
    flex-direction: row;
    padding: 0.25em;
  }

  .status aside {
    width: 4rem;
    margin-inline-end: 1em;
  }

  .status .avatar {
    border-radius: 6px;
    height: 3em;
    max-width: 3em;
  }

  .status .author-link {
    color: var(--col-fg-0);
    text-decoration: none;
  }

  .status .author-handle {
    margin-inline-start: 0.5em;
    color: var(--col-fg-1);
  }

  .status .status-main {
    width: 100%;
  }

  .status .status-main .top-line {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .status .status-body {
    margin-bottom: 0;
  }
</style>
