<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
let { class: cls = 'mb-4', showLabel = true }: { class?: string; showLabel?: boolean } = $props();
</script>

<button
	type="button"
	onclick={() => history.back()}
	aria-label={!showLabel ? m.btn_back() : undefined}
	class="group {cls} inline-flex min-h-[44px] items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring"
>
	<svg
		class="{showLabel ? 'mr-2' : ''} h-4 w-4 transform transition-transform group-hover:-translate-x-1"
		fill="none"
		stroke="currentColor"
		viewBox="0 0 24 24"
		aria-hidden="true"
	>
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="2"
			d="M10 19l-7-7m0 0l7-7m-7 7h18"
		/>
	</svg>
	{#if showLabel}{m.btn_back()}{/if}
</button>
