<script lang="ts">
  import { onDestroy, onMount } from 'svelte';

  let {
    max = undefined,
    perMs = 1000,
    start = ''
  }: { max?: number; perMs?: number; start?: string } = $props();
  let dots = $state('');
  let interval: NodeJS.Timeout;

  onMount(() => {
    dots = start;
    interval = setInterval(() => {
      dots += '.';

      if (max && dots.length > max) dots = '';
    }, perMs);
  });

  onDestroy(() => clearInterval(interval));
</script>

{dots}
