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

type SmartSearchErrorCode = 'SMART_SEARCH_UNAVAILABLE' | 'SMART_SEARCH_RATE_LIMITED';

let {
	status,
	errorCode,
	onSwitchToKeyword
}: {
	status: 'loading' | 'error';
	errorCode?: SmartSearchErrorCode;
	onSwitchToKeyword?: () => void;
} = $props();

const isRateLimited = $derived(errorCode === 'SMART_SEARCH_RATE_LIMITED');
const title = $derived(
	isRateLimited ? m.search_error_rate_limited() : m.search_error_unavailable()
);
const body = $derived(
	isRateLimited ? m.search_error_rate_limited_body() : m.search_error_unavailable_body()
);
</script>

{#if status === 'loading'}
	<div
		role="status"
		aria-live="polite"
		class="flex flex-col items-center justify-center gap-3 py-16 text-center"
	>
		<div
			aria-hidden="true"
			class="h-9 w-9 rounded-full border-[3px] border-primary/12 border-t-primary motion-safe:animate-spin"
		></div>
		<p class="text-sm font-bold text-ink">{m.search_loading_nl()}</p>
		<p class="max-w-xs text-xs text-ink-3 motion-safe:animate-pulse">
			{m.search_loading_nl_sub()}
		</p>
	</div>
{:else if status === 'error'}
	<div role="alert" class="flex flex-col items-center justify-center gap-3 py-16 text-center">
		<div
			aria-hidden="true"
			class="flex h-10 w-10 items-center justify-center rounded-full border-2 text-lg font-bold {isRateLimited
				? 'border-amber-400 bg-amber-50 text-amber-600'
				: 'border-red-400 bg-red-50 text-red-600'}"
		>
			{#if isRateLimited}
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5">
					<circle cx="12" cy="12" r="9" />
					<path d="M12 7v5l3 2" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			{:else}
				<span>!</span>
			{/if}
		</div>
		<p class="text-sm font-bold text-ink">{title}</p>
		<p class="max-w-xs text-xs text-ink-3">{body}</p>
		{#if !isRateLimited}
			<button
				type="button"
				onclick={onSwitchToKeyword}
				class="mt-2 inline-flex min-h-[44px] items-center rounded border border-primary bg-primary px-4 py-2 text-sm font-bold text-primary-fg outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
			>
				{m.search_switch_to_keyword()}
			</button>
		{/if}
	</div>
{/if}
