<!--
  @component Renders status indicator icons of a message.
-->
<script lang="ts">
  import Text from '~/app/ui/components/atoms/text/Text.svelte';
  import {getIndicatorElements} from '~/app/ui/components/molecules/message/internal/indicator/helpers';
  import type {IndicatorProps} from '~/app/ui/components/molecules/message/internal/indicator/props';
  import MdIcon from '~/app/ui/svelte-components/blocks/Icon/MdIcon.svelte';

  const {direction, options = {}, status}: IndicatorProps = $props();

  const elements = $derived(getIndicatorElements(direction, options, status));
</script>

<template>
  {#if elements.length > 0}
    <span class="elements">
      <!-- Key not required because all values are derived from `elements`. -->
      <!-- eslint-disable-next-line svelte/require-each-key -->
      {#each elements as element}
        <span class={`element ${element.color ?? 'default'}`}>
          <MdIcon title={element.title} theme={element.filled === true ? 'Filled' : 'Outlined'}>
            {element.icon}
          </MdIcon>
          {#if element.count !== undefined && (element.count > 1 || options.alwaysShowNumber === true)}
            <Text text={element.count.toString()} />
          {/if}
        </span>
      {/each}
    </span>
  {/if}
</template>

<style lang="scss">
  @use 'component' as *;

  .elements {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: rem(4px);

    .element {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: rem(3px);

      &.acknowledged {
        color: var(--mc-message-status-acknowledged-color);
      }

      &.declined {
        color: var(--mc-message-status-declined-color);
      }

      &.error {
        color: var(--mc-message-status-error-color);
      }
    }
  }
</style>
