<script lang="ts">
  import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
  import type { DotLottie } from '@lottiefiles/dotlottie-svelte';

  let dotLottie: DotLottie | null = null;

  function handlePlay() {
    dotLottie?.play();
  }

  function handlePause() {
    dotLottie?.pause();
  }

  function handleStop() {
    dotLottie?.stop();
  }

  function setSpeed(speed: number) {
    dotLottie?.setSpeed(speed);
  }

  function setSegment(start: number, end: number) {
    dotLottie?.setSegment(start, end);
  }
</script>

<DotLottieSvelte
  src="animation.lottie"
  dotLottieRefCallback={(ref) => dotLottie = ref}
/>

<div class="controls">
  <button on:click={handlePlay}>Play</button>
  <button on:click={handlePause}>Pause</button>
  <button on:click={handleStop}>Stop</button>
  <button on:click={() => setSpeed(2)}>2x Speed</button>
  <button on:click={() => setSegment(10, 50)}>Set Segment [10, 50]</button>
</div>

<script lang="ts">
  import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';

  let currentAnimation = 'animation1.lottie';
  const animations = {
    animation1: 'animation1.lottie',
    animation2: 'animation2.lottie',
    animation3: 'animation3.lottie'
  };
</script>

<DotLottieSvelte
  src={currentAnimation}
  key={currentAnimation}
  autoplay
  loop
/>

<div class="animation-selector">
  {#each Object.entries(animations) as [name, src] (name)}
    <button
      class:active={currentAnimation === src}
      on:click={() => currentAnimation = src}
    >
      {name}
    </button>
  {/each}
</div>

<style>
  .animation-selector {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
  }

  .active {
    background-color: #007bff;
    color: white;
  }
</style>