<script lang="ts">
	import { goto } from "$app/navigation";
	import { resolve } from "$app/paths";
	import type { Snippet } from "svelte";
	import Button from "#lib/components/ui/Button.svelte";
	import Logo from "#lib/components/ui/Logo.svelte";
	import CircleCheck from "$icon/circle-check";

	interface Props {
		title: string;
		testid?: string;
		children: Snippet;
	}

	let { title, testid, children }: Props = $props();

	const leave = () => goto(resolve("/"), { replaceState: true, invalidateAll: true });

	// portals to <body>: the layout isolates <main>, which would keep this under the topbar
	const toBody = (node: HTMLElement) => {
		document.body.appendChild(node);
		return () => node.remove();
	};
</script>

<div
	class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-background-canvas px-4 pt-16 pb-8"
	role="dialog"
	aria-modal="true"
	aria-labelledby="account-farewell-heading"
	{@attach toBody}
>
	<main class="w-full max-w-wide">
		<div class="mb-8 flex place-content-center">
			<Logo wordmark class="h-10" />
		</div>

		<div
			class="mx-auto flex w-full max-w-compact flex-col items-center gap-4 rounded-md border border-border-default bg-background-default p-8 text-center"
		>
			<CircleCheck class="size-8 text-foreground-success" aria-hidden="true" />
			<h1
				id="account-farewell-heading"
				data-testid={testid}
				class="typography-heading-2 text-foreground-default"
			>
				{title}
			</h1>
			<p class="typography-paragraph-regular text-foreground-muted">
				{@render children()}
			</p>
			<Button onclick={leave}>Go to Tangled</Button>
		</div>
	</main>
</div>