<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

interface Props {
	onZoomIn: () => void;
	onZoomOut: () => void;
	onFit: () => void;
}

let { onZoomIn, onZoomOut, onFit }: Props = $props();

// Docked bottom-right inside the canvas — the primary one-handed reach zone on a
// phone (Leonie). The container ignores pointer events so canvas gestures pass
// through the gaps; only the buttons capture taps.
const buttonClass =
	'pointer-events-auto inline-flex h-11 w-11 items-center justify-center rounded-sm border border-line bg-surface text-lg text-ink-2 shadow-sm transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none';
</script>

<div
	class="pointer-events-none absolute right-4 z-30 flex flex-col gap-1"
	style="bottom: max(calc(env(safe-area-inset-bottom, 0px) + 1rem), 1rem);"
>
	<button type="button" onclick={onZoomIn} aria-label={m.stammbaum_zoom_in()} class={buttonClass}>
		+
	</button>
	<button type="button" onclick={onZoomOut} aria-label={m.stammbaum_zoom_out()} class={buttonClass}>
		−
	</button>
	<button
		type="button"
		data-testid="fit-to-screen"
		onclick={onFit}
		aria-label={m.stammbaum_fit_to_screen()}
		class={buttonClass}
	>
		⤢
	</button>
</div>
