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

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

  /**
   * @typedef {Object} Props
   * @property {string} [text]
   * @property {number} [opacityTransitionDuration]
   * @property {any} [blurTransitionDuration]
   * @property {any} [easing]
   */

  /** @type {Props} */
  let {
    text = '',
    opacityTransitionDuration = 50,
    blurTransitionDuration = opacityTransitionDuration,
    easing = cubicOut
  } = $props();

  let previousValue = $state('');
  let opacity = tweened(1, { duration: opacityTransitionDuration, easing });
  let blur = tweened(0, { duration: blurTransitionDuration, easing });

  run(() => {
    if (text !== previousValue)
      Promise.all([opacity.set(0), blur.set(10)]).then(() => {
        previousValue = text;

        Promise.all([opacity.set(1), blur.set(0)]);
      });
  });
</script>

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