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

interface Props {
	count: number;
	onClose: () => void;
}

let { count, onClose }: Props = $props();

const message = $derived(
	count === 1 ? m.upload_banner_singular() : m.upload_banner_plural({ count })
);

$effect(() => {
	const timer = setTimeout(onClose, 8000);
	return () => clearTimeout(timer);
});
</script>

<div
	role="status"
	aria-live="polite"
	class="flex items-center gap-3 rounded-sm border border-line bg-accent-bg/60 px-4 py-3 text-ink"
>
	<svg
		class="h-5 w-5 shrink-0 text-primary"
		xmlns="http://www.w3.org/2000/svg"
		fill="none"
		viewBox="0 0 24 24"
		stroke="currentColor"
		stroke-width="2"
		aria-hidden="true"
	>
		<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
	</svg>
	<p class="flex-1 font-sans text-sm">
		<span>{message}</span>
		<a href="/enrich" class="ml-1 font-medium text-primary hover:underline">
			{m.upload_banner_cta()}
		</a>
	</p>
	<button
		type="button"
		data-testid="upload-banner-close"
		aria-label={m.upload_banner_close()}
		onclick={onClose}
		class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-sm text-ink-3 hover:bg-ink/10 hover:text-ink"
	>
		<svg
			class="h-4 w-4"
			xmlns="http://www.w3.org/2000/svg"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			stroke-width="2"
			aria-hidden="true"
		>
			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
		</svg>
	</button>
</div>
