<script lang="ts">
    import { onMount, onDestroy } from "svelte";
    import IconButton from "$lib/components/IconButton.svelte";

    let {
        src,
        alt = "",
        onclose,
    }: { src: string; alt?: string; onclose: () => void } = $props();

    function onKeydown(e: KeyboardEvent) {
        if (e.key === "Escape") onclose();
    }

    onMount(() => window.addEventListener("keydown", onKeydown));
    onDestroy(() => {
        if (typeof window !== "undefined")
            window.removeEventListener("keydown", onKeydown);
    });
</script>

<div
    class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 p-4 cursor-zoom-out"
    onclick={onclose}
    role="dialog"
    aria-modal="true"
    aria-label={alt || "Bild Vollansicht"}
>
    <img
        {src}
        {alt}
        class="max-w-full max-h-full object-contain rounded shadow-2xl cursor-default"
        onclick={(e) => e.stopPropagation()}
    />
    <IconButton icon="lucide:x" label="Schließen" variant="ghost" size="md" onclick={onclose} class="absolute top-4 right-4" />
</div>
