<script lang="ts">
  import { timefmt } from '../../../helpers.js';

  type Tag = {
    timestamp: number;
    author: string;
    added: boolean;
    id?: string;
    tag?: {
      name: string;
      fg: string;
      color: string;
    };
  };

  export let tag: Tag;
</script>

<div class="py-3 flex items-center" id={tag.id}>
  <div class="px-3 w-20">
    <a href="/{tag.author}">
      <img class="profile-picture-small" src="/identicon/{tag.author}/small" alt={tag.author} />
    </a>
  </div>
  <div class="w-full flex items-center">
    <span class="icon-[tdesign--tag] w-4 h-4"></span>
    <a class="mx-2 author" href="/{tag.author}">{tag.author}</a>
    {#if tag.tag}
      {#if tag.added}
        added
      {:else}
        removed
      {/if}
      tag
      <span class="badge tag m-1" style="background-color:{tag.tag.color};color:{tag.tag.fg};"
        >{tag.tag.name}</span>
    {:else if tag.added}
      reopened this discussion
    {:else}
      closed this discussion
    {/if}
    {timefmt(tag.timestamp * 1000)}
  </div>
</div>

<style>
  .profile-picture-small {
    width: 4em;
    background-color: white;
    border-radius: 50%;
  }
</style>