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

  let {
    text = '',
    opacityTransitionDuration = 50,
    blurTransitionDuration = opacityTransitionDuration,
    easing = cubicOut
  } = $props();
  let previousValue = $state('');
  const opacity = tweened(1, { easing: cubicOut });
  const blur = tweened(0, { easing: cubicOut });

  $effect(() => {
    if (text !== previousValue)
      Promise.all([
        opacity.set(0, { duration: opacityTransitionDuration, easing }),
        blur.set(10, { duration: blurTransitionDuration, easing })
      ]).then(() => {
        previousValue = text;

        Promise.all([
          opacity.set(1, { duration: opacityTransitionDuration, easing }),
          blur.set(0, { duration: blurTransitionDuration, easing })
        ]);
      });
  });
</script>

<span
  style="opacity: {$opacity}; filter: blur({$blur}px); transition: opacity {opacityTransitionDuration}ms, filter {blurTransitionDuration}ms;"
>
  {previousValue}
</span>
