<script lang="ts">
  import type { ReactionCount } from "$lib/api/types";
  import CustomEmoji from "$lib/components/CustomEmoji.svelte";

  interface Props {
    own: boolean;
    reactions: ReactionCount[];
  }

  let { reactions, own }: Props = $props();
</script>

<div class="Reactions" class:own>
  {#each reactions as reaction, index (reaction.custom_emoji_id ?? reaction.emoji ?? index)}
    <span class="reaction" class:chosen={reaction.chosen}>
      {#if reaction.custom_emoji_id}
        <CustomEmoji id={reaction.custom_emoji_id} size={1.25} />
      {:else}
        <span class="emoji">{reaction.emoji ?? "❓"}</span>
      {/if}
      <span class="count">{reaction.count}</span>
    </span>
  {/each}
</div>

<style lang="scss">
  .Reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
  }

  .reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;

    height: 1.625rem;
    padding: 0 0.4375rem 0 0.375rem;
    border-radius: 1rem;

    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);

    background-color: var(--color-message-reaction);

    .own & {
      background-color: var(--color-message-reaction-own);
    }

    &.chosen {
      color: var(--color-white);
      background-color: var(--color-primary);
    }
  }

  .emoji {
    font-size: 1rem;
    line-height: 1;
  }

  .count {
    line-height: 1;
  }
</style>
