<script lang="ts">
	import { AlertTriangle, X } from 'lucide-svelte';
	import { cn } from '$lib/utils';

	export type FloatingInlineNoticeVariant = 'warning';

	let {
		open,
		message,
		variant = 'warning',
		durationMs = 6500,
		closeAriaLabel,
		onClose,
		class: className = ''
	}: {
		open: boolean;
		message: string;
		variant?: FloatingInlineNoticeVariant;
		durationMs?: number;
		closeAriaLabel: string;
		onClose?: () => void;
		class?: string;
	} = $props();

	const variantClasses: Record<
		FloatingInlineNoticeVariant,
		{ wrap: string; icon: string; text: string; btn: string }
	> = {
		warning: {
			wrap: 'border-amber-300/70 bg-orange-50 dark:border-amber-500/35 dark:bg-amber-950/40 shadow-md',
			icon: 'text-amber-600 dark:text-amber-400',
			text: 'text-amber-900 dark:text-amber-100',
			btn: 'text-amber-700 hover:text-amber-900 hover:bg-amber-100 dark:text-amber-300 dark:hover:bg-amber-900/40'
		}
	};
	const styles = $derived(variantClasses[variant]);

	$effect(() => {
		if (!open || durationMs <= 0) return;
		void message;
		const t = setTimeout(() => onClose?.(), durationMs);
		return () => clearTimeout(t);
	});
</script>

{#if open && message}
	<div
		role="status"
		class={cn(
			'pointer-events-auto fixed top-4 right-4 z-[1000000000] flex w-[min(100vw-2rem,26rem)] items-start gap-3 rounded-2xl border px-4 py-3 pr-11',
			styles.wrap,
			className
		)}
	>
		<span class={cn('mt-0.5 shrink-0', styles.icon)} aria-hidden="true">
			<AlertTriangle class="size-5" stroke-width={2} />
		</span>
		<p class={cn('flex-1 text-sm leading-snug font-medium', styles.text)}>
			{message}
		</p>
		<button
			type="button"
			class={cn(
				'absolute top-2 right-2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors',
				styles.btn
			)}
			onclick={() => onClose?.()}
			aria-label={closeAriaLabel}
		>
			<X class="size-4" stroke-width={2} />
		</button>
	</div>
{/if}
