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

interface Props {
	onRetry: () => void;
	message?: string;
}

const { onRetry, message }: Props = $props();

const displayMessage: string = $derived(message ?? m.chronik_error_title());
</script>

<div
	role="alert"
	class="flex items-start gap-3 rounded-sm border border-warning/40 bg-warning/10 p-4"
>
	<span class="mt-0.5 text-warning-fg" aria-hidden="true">
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="h-5 w-5"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="2"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
			/>
		</svg>
	</span>
	<div class="min-w-0 flex-1">
		<p class="font-sans text-sm text-warning-fg">
			{displayMessage}
		</p>
		<button
			type="button"
			onclick={onRetry}
			class="mt-2 inline-flex items-center rounded-sm bg-warning-fg px-3 py-1 font-sans text-xs font-medium text-surface transition-colors hover:opacity-90 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
		>
			{m.chronik_error_retry()}
		</button>
	</div>
</div>
