<script lang="ts">
    import { RefreshOutline } from "flowbite-svelte-icons";

    let { img = $bindable(), height }: { img: HTMLCanvasElement; height: number } =
        $props();
</script>

<div class="page-container" style:height={height + "px"}>
    <!--{#if !img}-->
    <!--    <div class="loading-container">-->
    <!--        <RefreshOutline class="animate-spin" size="xl" />-->
    <!--    </div>-->
    <!--{:else}-->
        <canvas bind:this={img} class="bg-forge-dark">

        </canvas>
<!--        <ZoomableContainer imgUrl={img} {height} />-->
<!--    {/if}-->
</div>

<style lang="postcss">
    .page-container {
        @apply w-full bg-forge-dark relative m-auto;
    }
    .loading-container {
        @apply flex items-center justify-center h-full;
    }
</style>
