<script>
  import { run } from 'svelte/legacy';

  import { tweened } from 'svelte/motion';
  import { cubicOut } from 'svelte/easing';

  /**
   * @typedef {Object} Props
   * @property {number} [start]
   * @property {number} [end]
   * @property {number} [duration]
   * @property {number} [delay]
   */

  /** @type {Props} */
  let {
    start = 0,
    end = 100,
    duration = 2000,
    delay = 0
  } = $props();

  const count = tweened(start, {
    duration: duration,
    easing: cubicOut,
    delay: delay
  });

  run(() => {
    count.set(end);
  });
</script>

<span class="counter" class:visible={$count !== start}>
  {Math.round($count)}
</span>

<style lang="scss">
  .counter {
    $duration: 0.2s;

    opacity: 0;
    transition: opacity $duration ease-out, transform $duration ease-out;
  }

  .counter.visible {
    opacity: 1;
  }
</style>
