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

  let { start = 0, end = 100, duration = 2000, delay = 0 } = $props();
  const count = tweened(0, { easing: cubicOut });

  $effect(() => {
    count.set(start, { duration: 0 });
    setTimeout(() => count.set(end, { duration }), delay);
  });
</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>
