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

let {
	isZoomed,
	hasSelection,
	onresetzoom,
	onclearselection
}: {
	isZoomed: boolean;
	hasSelection: boolean;
	onresetzoom: () => void;
	onclearselection: () => void;
} = $props();
</script>

<div class="absolute top-2 right-2 flex items-center gap-1">
	{#if isZoomed}
		<button
			type="button"
			data-testid="timeline-zoom-reset"
			aria-label={m.timeline_zoom_reset()}
			title={m.timeline_zoom_reset()}
			onclick={onresetzoom}
			class="hover:text-ink-1 inline-flex h-11 min-w-[44px] items-center justify-center gap-1 rounded-sm px-3 text-xs text-ink-3 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
		>
			↩
		</button>
	{/if}
	{#if hasSelection}
		<button
			type="button"
			data-testid="timeline-clear"
			aria-label={m.timeline_clear_selection()}
			onclick={onclearselection}
			class="hover:text-ink-1 inline-flex h-11 w-11 items-center justify-center rounded-full text-ink-3 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
		>
			×
		</button>
	{/if}
</div>
