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

    let {
        scale,
        onZoomIn,
        onZoomOut,
        resetZoom,
    }: {
        scale: number;
        onZoomIn: () => void;
        onZoomOut: () => void;
        resetZoom: () => void;
    } = $props();

</script>

<div class="controls">
    <span class="zoom-level">{(scale * 100).toFixed(0)}%</span>
    <button class="control-button" onclick={onZoomIn}>
        <ZoomInOutline />
    </button>
    <button class="control-button" onclick={onZoomOut}>
        <ZoomOutOutline />
    </button>
    <button class="control-button" onclick={resetZoom}>
        <RefreshOutline />
    </button>
</div>

<style lang="postcss">
    .controls {
        @apply bg-forge-prim border-forge-bound border flex flex-row;
        position: absolute;
        top: 0;
        right: 0;
        justify-content: flex-end;
        z-index: 1;
    }

    .control-button {
        @apply bg-forge-prim p-1 rounded-sm hover:bg-forge-acc m-1;
        cursor: pointer;
    }

    .zoom-level {
        display: inline-flex;
        align-items: center;
        padding: 0 8px;
    }
</style>
