<svelte:options runes={true} />

<script lang="ts">
    import {Button} from "$lib/components/ui/button";
    import {onMount} from "svelte";
    let { audio, pause, play } = $props();
    let mounted = $state(false);

    $inspect(audio);

    onMount(() => {
        mounted = true;
    })
</script>

<div class="flex flex-row gap-2">
    {#if mounted}
        <p>Paused: {audio.paused}</p>
        <p>Volume: {audio.volume}</p>
        <p>Duration: {audio.duration}</p>
        {#if audio.paused}
            <Button onclick={play}>Play</Button>
        {:else}
            <Button onclick={pause}>Pause</Button>
        {/if}
    {:else}
        <p>Nothing going on here</p>
    {/if}
</div>
