<svelte:options customElement={{ tag: 'm-kpi-item' }} />

<script lang="ts">
  import type { Component } from 'svelte';
  import { ArrowBottomRight24, ArrowTopRight24, Less24 } from '@mozaic-ds/icons-svelte';
  /**
   * A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.
   */
  interface Props {
    [key: string]: any;
    /**
     * The current value of the kpi item.
     */
    value: string;
    /**
     * Defines the evolution of the kpi.
     */
    trend?: 'increasing' | 'decreasing' | 'stable';
    /**
     * Label of the kpi item.
     */
    label?: string;
    /**
     * Allows to define the kpi item status.
     */
    status?: 'info' | 'warning' | 'error' | 'success' | 'neutral';
    /**
     * The evolution information defining the kpi.
     */
    information?: string;
    /**
     * Allows to define the kpi item size.
     */
    size?: 's' | 'm' | 'l';
  }

  let {
    value,
    trend,
    label,
    status = 'info',
    information,
    size = 's',
    class: className,
    ...attrs
  }: Props = $props();

  const isMedium = $derived(size === 'm');
  const isLarge = $derived(size === 'l');

  const iconMap: Record<NonNullable<Props['trend']>, Component> = {
    increasing: ArrowTopRight24,
    decreasing: ArrowBottomRight24,
    stable: Less24,
  };

  const IconComponent = $derived(trend ? iconMap[trend] : undefined);
</script>

<div class={['mc-kpi', `mc-kpi--${size}`, `mc-kpi--${status}`, className]} {...attrs}>
  {#if isMedium && label}
    <span class="mc-kpi__label">
      {label}
    </span>
  {/if}
  <div class="mc-kpi__content">
    <div class="mc-kpi__main">
      {#if isLarge && label}
        <span class="mc-kpi__label">
          {label}
        </span>
      {/if}
      <span class="mc-kpi__value">{value}</span>
    </div>
    {#if trend || information}
      <div class="mc-kpi__aside">
        {#if isLarge && information}
          <span class="mc-kpi__detail">
            {information}
          </span>
        {/if}

        {#if trend}
          <IconComponent className="mc-kpi__icon" color="black" />
        {/if}
      </div>
    {/if}
  </div>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-kpi,
.mc-kpi * {
  box-sizing: border-box;
}
.mc-kpi {
  display: inline-block;
}
.mc-kpi:not(.mc-kpi--s) {
  min-width: 10rem;
}
.mc-kpi__label {
  font-size: var(--font-body-s, 0.875rem);
  font-weight: var(--font-weight-semi-bold, 600);
  display: block;
}
.mc-kpi__content {
  line-height: var(--line-height-s, 1.3);
  display: flex;
}
.mc-kpi__main {
  align-items: center;
  display: flex;
  justify-content: center;
}
.mc-kpi__value {
  font-weight: var(--font-weight-semi-bold, 600);
  font-size: var(--font-body-s, 0.875rem);
  color: var(--color-kpi-value, var(--kpi-item-color-value-info, #0074aa));
}
.mc-kpi__aside {
  align-items: center;
  background-color: var(--kpi-item-color-trend-item-background, #ffffff);
  color: var(--kpi-item-color-trend-item-text, #000000);
  display: flex;
  justify-content: center;
  border-radius: var(--border-radius-xs, 0.125rem);
}
.mc-kpi__detail {
  font-size: var(--font-body-s, 0.875rem);
}
.mc-kpi__icon {
  display: block;
  height: 1rem;
  width: 1rem;
}
.mc-kpi--s .mc-kpi__content {
  gap: 0.25rem;
}
.mc-kpi--s .mc-kpi__main {
  background-color: var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));
  border: 1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));
  border-radius: 4px;
  overflow: hidden;
  padding: 0 0.25rem;
  height: 1.5rem;
}
.mc-kpi--s .mc-kpi__aside {
  background-color: transparent;
}
.mc-kpi--m .mc-kpi__label {
  color: var(--color-kpi-label-medium, var(--kpi-item-color-label-info-medium, #000000));
  margin-bottom: 0.25rem;
}
.mc-kpi--m .mc-kpi__content {
  background-color: var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));
  border: 1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));
  border-radius: 4px;
  overflow: hidden;
  height: 3rem;
  align-items: center;
  padding: 0 0.25rem 0 0.5rem;
  gap: 0.5rem;
}
.mc-kpi--m .mc-kpi__main {
  flex-grow: 1;
  height: 2.5rem;
}
.mc-kpi--m .mc-kpi__value {
  font-size: var(--font-body-l, 1.125rem);
}
.mc-kpi--m .mc-kpi__aside {
  padding: 0 0.5rem;
  height: 2.5rem;
  width: 2.5rem;
}
.mc-kpi--l {
  background-color: var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));
  border: 1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));
  border-radius: 4px;
  overflow: hidden;
  padding: 0.5rem;
  height: 9rem;
}
.mc-kpi--l .mc-kpi__content {
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}
.mc-kpi--l .mc-kpi__main {
  flex-direction: column;
  flex-grow: 1;
}
.mc-kpi--l .mc-kpi__label {
  font-size: var(--font-body-m, 1rem);
  color: var(--color-kpi-label-large, var(--kpi-item-color-label-info-large, #0074aa));
}
.mc-kpi--l .mc-kpi__value {
  font-size: var(--font-heading-l, 2rem);
}
.mc-kpi--l .mc-kpi__aside {
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  font-size: var(--font-body-s, 0.875rem);
}
.mc-kpi--warning {
  --color-kpi-background: var(--kpi-item-color-background-warning, #fdf1e8);
  --color-kpi-border: var(--kpi-item-color-border-warning, #ef934a);
  --color-kpi-label-medium: var(--kpi-item-color-label-warning-medium, #000000);
  --color-kpi-label-large: var(--kpi-item-color-label-warning-large, #b64f00);
  --color-kpi-value: var(--kpi-item-color-value-warning, #b64f00);
}
.mc-kpi--error {
  --color-kpi-background: var(--kpi-item-color-background-error, #fdeaea);
  --color-kpi-border: var(--kpi-item-color-border-error, #ef5f5c);
  --color-kpi-label-medium: var(--kpi-item-color-label-error-medium, #000000);
  --color-kpi-label-large: var(--kpi-item-color-label-error-large, #c61112);
  --color-kpi-value: var(--kpi-item-color-value-error, #c61112);
}
.mc-kpi--success {
  --color-kpi-background: var(--kpi-item-color-background-success, #ebf5de);
  --color-kpi-border: var(--kpi-item-color-border-success, #78be20);
  --color-kpi-label-medium: var(--kpi-item-color-label-success-medium, #000000);
  --color-kpi-label-large: var(--kpi-item-color-label-success-large, #117f03);
  --color-kpi-value: var(--kpi-item-color-value-success, #117f03);
}
.mc-kpi--neutral {
  --color-kpi-background: var(--kpi-item-color-background-neutral, #f2f2f2);
  --color-kpi-border: var(--kpi-item-color-border-neutral, #999999);
  --color-kpi-label-medium: var(--kpi-item-color-label-neutral-medium, #000000);
  --color-kpi-label-large: var(--kpi-item-color-label-neutral-large, #666666);
  --color-kpi-value: var(--kpi-item-color-value-neutral, #666666);
}</style>
