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

    let { img, height }: { img: string | undefined; 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}
        <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>
