<script lang="ts">
  import settings from '$stores/settings';
  import { fly } from 'svelte/transition';

  interface Props {
    data: any;
    way: number;
    children?: import('svelte').Snippet;
  }

  let { data, way, children }: Props = $props();

  const animationDelay = 100;
</script>

{#if $settings.displayDisableAnimations}
  {@render children?.()}
{:else}
  {#key data.url}
    <div
      in:fly={{
        x: way,
        duration: animationDelay,
        delay: animationDelay
      }}
      out:fly={{ x: -way, duration: animationDelay }}
    >
      {@render children?.()}
    </div>
  {/key}
{/if}
