<script lang="ts">
  /**
   * A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.
   */
  interface Props {
    [key: string]: any;
    /**
     * Sets the size of the progress bar.
     */
    size?: 's' | 'm' | 'l';
    /**
     * The current value of the progress bar.
     */
    value?: number;
    /**
     * Shows either a percentage or custom content.
     */
    type?: 'percentage' | 'content';
    /**
     * Main content shown when `type` is `'content'`.
     */
    contentvalue?: string;
    /**
     * Additional text shown to define the `contentValue`.
     */
    additionalinfo?: string;
  }

  let {
    size,
    value = 0,
    type = 'percentage',
    contentvalue,
    additionalinfo,
    class: className,
    ...attrs
  }: Props = $props();
</script>

<div
  class={['mc-circular-progressbar', size && `mc-circular-progressbar--${size}`, className]}
  role="progressbar"
  aria-valuenow={value}
  aria-valuemin="0"
  aria-valuemax="100"
  style={`--progress-value: ${value};`}
  {...attrs}
>
  <svg
    class="mc-circular-progressbar__line"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    viewBox="0 0 100 100"
  >
    <circle class="mc-circular-progressbar__track" cx="50" cy="50" r="46" />
    <circle class="mc-circular-progressbar__indicator" cx="50" cy="50" r="46" />
  </svg>

  {#if type === 'percentage'}
    <div class="mc-circular-progressbar__percentage">
      <p class="mc-circular-progressbar__value">{value}</p>
      <p class="mc-circular-progressbar__unit">%</p>
    </div>
  {/if}

  {#if type === 'content'}
    <div class="mc-circular-progressbar__content">
      <p class="mc-circular-progressbar__number">{contentvalue}</p>
      {#if additionalinfo}
        <p class="mc-circular-progressbar__text">{additionalinfo}</p>
      {/if}
    </div>
  {/if}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-circular-progressbar {
  --progress-value: 40;
  font-family: var(--font-family, LeroyMerlin), sans-serif;
  color: var(--progressbar-color-text, #000000);
  position: relative;
  display: inline-block;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
}
.mc-circular-progressbar__line {
  transform: rotate(270deg);
}
.mc-circular-progressbar__track, .mc-circular-progressbar__indicator {
  stroke-width: calc(8 / (144 / 100));
  fill: none;
  stroke-linecap: round;
}
.mc-circular-progressbar__track {
  stroke: var(--progressbar-color-background, #c9d0de);
}
.mc-circular-progressbar__indicator {
  stroke: var(--progressbar-color-indicator, #464e63);
  stroke-dasharray: 289.1428571429;
  stroke-dashoffset: calc((100 - var(--progress-value)) / 100 * 289.1428571429);
  transition: stroke-dashoffset 0.3s ease;
}
.mc-circular-progressbar__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mc-circular-progressbar__number, .mc-circular-progressbar__text {
  white-space: nowrap;
  text-align: center;
  line-height: var(--line-height-s, 1.3);
  margin: 0;
  color: var(--progressbar-color-text, #000000);
}
.mc-circular-progressbar__number {
  font-size: var(--font-size-300, 1.5rem);
}
.mc-circular-progressbar__text {
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
}
.mc-circular-progressbar__percentage {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mc-circular-progressbar__value, .mc-circular-progressbar__unit {
  font-weight: var(--font-weight-semi-bold, 600);
  line-height: var(--line-height-s, 1.3);
  color: var(--progressbar-color-text, #000000);
}
.mc-circular-progressbar__value {
  font-size: var(--font-size-600, 2.5rem);
}
.mc-circular-progressbar__unit {
  font-size: var(--font-size-300, 1.5rem);
}
.mc-circular-progressbar--m .mc-circular-progressbar__content, .mc-circular-progressbar--s .mc-circular-progressbar__content {
  display: none;
}
.mc-circular-progressbar--m .mc-circular-progressbar__percentage, .mc-circular-progressbar--s .mc-circular-progressbar__percentage {
  display: none;
}
.mc-circular-progressbar--m::after, .mc-circular-progressbar--s::after {
  display: none;
}
.mc-circular-progressbar--m .mc-circular-progressbar__track,
.mc-circular-progressbar--m .mc-circular-progressbar__indicator {
  stroke-width: calc(4 / (48 / 100));
}
.mc-circular-progressbar--m {
  width: 3rem;
  height: 3rem;
}
.mc-circular-progressbar--s .mc-circular-progressbar__track,
.mc-circular-progressbar--s .mc-circular-progressbar__indicator {
  stroke-width: calc(4 / (32 / 100));
  transform-origin: center;
  transform: scale(0.95);
}
.mc-circular-progressbar--s {
  width: 2rem;
  height: 2rem;
}</style>
