<script lang="ts">
  /**
   * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
   */
  interface Props {
    [key: string]: any;
    /**
     * Specifies the visual appearance of the loader.
     */
    appearance?: 'standard' | 'accent' | 'inverse';

    /**
     * Defines the size of the loader.
     */
    size?: 'xs' | 's' | 'm' | 'l';

    /**
     * Text to display alongside the loader when using the loader inside an `Overlay`.
     */
    text?: string;
  }

  let { size = 'm', appearance = 'standard', text, class: className, ...attrs }: Props = $props();

  const setViewBox = () => {
    let viewBox: string;

    switch (size) {
      case 'xs':
        viewBox = '0 0 20 20';
        break;
      case 's':
        viewBox = '0 0 24 24';
        break;
      case 'l':
        viewBox = '0 0 64 64';
        break;
      default:
        viewBox = '0 0 32 32';
    }

    return viewBox;
  };

  const setCircleRadius = () => {
    let circleRadius: number;

    switch (size) {
      case 'xs':
        circleRadius = 6;
        break;
      case 's':
        circleRadius = 6;
        break;
      case 'l':
        circleRadius = 19;
        break;
      default:
        circleRadius = 9;
    }

    return circleRadius;
  };
</script>

<div
  class={[
    'mc-loader',
    `mc-loader--${size}`,
    `mc-loader--${appearance}`,
    text && 'mc-loader--text-visible',
    className,
  ]}
  {...attrs}
>
  <span class="mc-loader__spinner">
    <svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox={setViewBox()}>
      <circle class="mc-loader__path" cx="50%" cy="50%" r={setCircleRadius()} />
    </svg>
  </span>

  {#if text}
    <span class="mc-loader__text">
      {text}
    </span>
  {/if}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-loader .mc-loader__spinner {
  height: 2rem;
  width: 2rem;
}
.mc-loader .mc-loader__path {
  stroke-width: 4;
}
.mc-loader {
  color: var(--loader-color-standard, #464e63);
}
.mc-loader .mc-loader__path {
  stroke: currentcolor;
}
.mc-loader {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
}
.mc-loader__spinner:not(:only-child) {
  margin-bottom: 1rem;
}
.mc-loader__icon {
  animation: rotate-loader 2s linear infinite;
  transform-origin: center;
}
.mc-loader__path {
  fill: none;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: animate-dash-loader 2s ease-in-out infinite;
}
.mc-loader__text {
  font-size: var(--font-size-150, 1rem);
  color: currentcolor;
}
.mc-loader:not(.mc-loader--text-visible) .mc-loader__text {
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute;
  top: -1000px;
  left: -1000px;
  text-align: left;
  opacity: 0;
}
.mc-loader--xs .mc-loader__spinner {
  height: 1.25rem;
  width: 1.25rem;
}
.mc-loader--xs .mc-loader__path {
  stroke-width: 2;
}
.mc-loader--s .mc-loader__spinner {
  height: 1.5rem;
  width: 1.5rem;
}
.mc-loader--s .mc-loader__path {
  stroke-width: 4;
}
.mc-loader--l .mc-loader__spinner {
  height: 4rem;
  width: 4rem;
}
.mc-loader--l .mc-loader__path {
  stroke-width: 8;
}
.mc-loader--accent {
  color: var(--loader-color-accent, #117f03);
}
.mc-loader--accent .mc-loader__path {
  stroke: currentcolor;
}
.mc-loader--inverse {
  color: var(--loader-color-inverse, #ffffff);
}
.mc-loader--inverse .mc-loader__path {
  stroke: currentcolor;
}

@keyframes rotate-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@keyframes animate-dash-loader {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}</style>
