<script>
  import { onMount, onDestroy } from 'svelte';
  import { createLiquidProgress } from '@avenra/liquid-glass';
  import '@avenra/liquid-glass/styles';

  export let value = 0;
  export let max = 100;

  let container;
  let handle;

  onMount(() => {
    // 1. Initialize
    handle = createLiquidProgress(container, { value, max });

    // 2. Listen for changes if needed
    handle.on('change', (e) => {
      value = e.value;
    });
  });

  // 3. Reactively update the handle when the value prop changes
  $: if (handle) handle.value = value;

  onDestroy(() => {
    // 4. Cleanup
    if (handle) handle.destroy();
  });
</script>

<div bind:this={container}></div>

<script>
  import LiquidProgress from './LiquidProgress.svelte';
  let myProgress = 30;
</script>

<LiquidProgress bind:value={myProgress} />
<button on:click={() => myProgress += 10}>Increase</button>