<script lang="ts">
  import {
    InfoCircleFilled24,
    WarningCircleFilled24,
    CrossCircleFilled24,
    CheckCircleFilled24,
  } from '@mozaic-ds/icons-svelte';
  import Loader from '../loader/Loader.svelte';
  /**
   * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.
   */
  interface Props {
    [key: string]: any;
    /**
     * Allows to define the status message style.
     */
    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';
    /**
     * Allows to define the status message appearance.
     * The accent status is used to highlight a specific message.
     */
    appearance?: 'standard' | 'accent';
    /**
     * Label of the status message.
     */
    label: string;
  }

  let {
    label,
    status = 'info',
    appearance = 'standard',
    class: className,
    ...attrs
  }: Props = $props();

  const iconMap = [
    { status: 'info', component: InfoCircleFilled24 },
    { status: 'success', component: CheckCircleFilled24 },
    { status: 'warning', component: WarningCircleFilled24 },
    { status: 'error', component: CrossCircleFilled24 },
    { status: 'neutral', component: InfoCircleFilled24 },
  ];

  function getSelected(status: string) {
    return iconMap.find((icon) => icon.status === status) || iconMap[0];
  }

  const selected = $derived(getSelected(status));

  const classObject = $derived({
    'mc-status-message': true,
    [`mc-status-message--${status}`]: status,
    [`mc-status-message--${appearance}`]: appearance === 'accent',
    className,
  });
</script>

<div class={classObject} {...attrs}>
  {#if status !== 'inprogress'}
    <span class="mc-status-message__icon">
      <selected.component />
    </span>
  {:else}
    <Loader size="s" />
  {/if}
  <p class="mc-status-message__description">{label}</p>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-status-message .mc-status-message__icon {
  fill: var(--status-message-color-icon-info, #0b96cc);
  color: var(--status-message-color-icon-info, #0b96cc);
}
.mc-status-message {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.mc-status-message__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.mc-status-message__description {
  margin: 0;
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-regular, 400);
  color: var(--status-message-color-text, #404040);
}
.mc-status-message--accent .mc-status-message__description {
  font-weight: var(--font-weight-semi-bold, 600);
}
.mc-status-message--success .mc-status-message__icon {
  fill: var(--status-message-color-icon-success, #3f9e10);
  color: var(--status-message-color-icon-success, #3f9e10);
}
.mc-status-message--error .mc-status-message__icon {
  fill: var(--status-message-color-icon-error, #ea302d);
  color: var(--status-message-color-icon-error, #ea302d);
}
.mc-status-message--warning .mc-status-message__icon {
  fill: var(--status-message-color-icon-warning, #ea7315);
  color: var(--status-message-color-icon-warning, #ea7315);
}
.mc-status-message--neutral .mc-status-message__icon {
  fill: var(--status-message-color-icon-neutral, #808080);
  color: var(--status-message-color-icon-neutral, #808080);
}</style>
