<script lang="ts">
  import CircularProgressbar from '../circularprogressbar/CircularProgressbar.svelte';
  /**
   * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
   */
  interface Props {
    [key: string]: any;
    /**
     * Current step of the stepper compact.
     */
    value?: number;
    /**
     * Maximum number of steps for the stepper compact.
     */
    maxsteps?: number;
    /**
     * Label of the stepper compact.
     */
    label: string;
    /**
     * Description displayed below the label of the stepper compact.
     */
    description?: string;
  }

  let {
    value = $bindable(1),
    maxsteps = $bindable(4),
    label,
    description,
    class: className,
    ...attrs
  }: Props = $props();

  const progressValue = $derived(() => {
    const v = value ?? 0;
    const m = maxsteps ?? 1;
    return Math.round((v / m) * 100);
  });

  const contentValue = $derived(() => {
    return `${value} / ${maxsteps}`;
  });
</script>

<div class={['mc-stepper-compact', className]} {...attrs}>
  <div class="mc-circular-progressbar mc-stepper-compact__progress">
    <CircularProgressbar
      aria-label="Progress bar"
      type="content"
      size="m"
      contentvalue={contentValue()}
      value={progressValue()}
      class="mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"
    />
  </div>
  <div class="mc-stepper-compact__label-container">
    <p class="mc-stepper-compact__label">{label}</p>
    {#if description}
      <p class="mc-stepper-compact__description">{description}</p>
    {/if}
  </div>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-stepper-compact {
  display: inline-flex;
  justify-content: start;
  align-items: center;
}
.mc-stepper-compact__progress {
  width: 3rem;
  height: 3rem;
}
.mc-stepper-compact__indicator {
  stroke-width: calc(4 / (48 / 100));
  stroke: var(--stepper-color-progress-bar-indicator, #117f03);
  fill: none;
  stroke-linecap: round;
}
.mc-stepper-compact__number {
  font-size: var(--font-size-100, 0.875rem);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--progressbar-color-text, #000000);
}
.mc-stepper-compact__label, .mc-stepper-compact__description {
  padding-left: 0.5rem;
}
.mc-stepper-compact__label {
  margin: 0;
  font-weight: var(--font-weight-semi-bold, 600);
  font-size: var(--font-size-100, 0.875rem);
  color: var(--progressbar-color-text, #000000);
  line-height: var(--line-height-s, 1.3);
}
.mc-stepper-compact__description {
  margin: 0.25rem 0 0;
  font-weight: var(--font-weight-regular, 400);
  font-size: var(--font-size-50, 0.75rem);
  color: var(--stepper-color-information, #666666);
  line-height: var(--line-height-s, 1.3);
}

.mc-stepper-compact__progress {
  width: 3rem;
  height: 3rem;
}
.mc-stepper-compact__progress :global(.mc-circular-progressbar__content) {
  display: block !important;
  visibility: visible;
  font-weight: 600;
  font-size: 0.875rem;
}
.mc-stepper-compact__progress :global(.mc-circular-progressbar__number) {
  display: block;
  visibility: visible;
  opacity: 1;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.mc-stepper-compact__progress :global(.mc-circular-progressbar__indicator) {
  stroke-width: calc(4 / (48 / 100));
  stroke: var(--stepper-color-progress-bar-indicator, #117f03);
  fill: none;
  stroke-linecap: round;
}</style>
