<!--
  @component Renders the status indicator icon of a receiver (i.e., the status of the last message
  in the corresponding conversation).
-->
<script lang="ts">
  import {getIndicatorElement} from '~/app/ui/components/partials/receiver-card/internal/content-item/internal/indicator/helpers';
  import type {IndicatorProps} from '~/app/ui/components/partials/receiver-card/internal/content-item/internal/indicator/props';
  import MdIcon from '~/app/ui/svelte-components/blocks/Icon/MdIcon.svelte';

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

  const element = $derived(getIndicatorElement(conversation.receiver.type, status, options));
</script>

{#if element !== undefined}
  <span class={`element ${element.color ?? 'default'}`}>
    <MdIcon theme="Filled">{element.icon}</MdIcon>
  </span>
{/if}

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

  .element {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: rem(3px);
    font-size: rem(12px);
    line-height: rem(18px);

    &.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>
