<script lang="ts">
	import { page } from '$app/stores';
	import { closest } from '$lib/Error/path';
	import Popup from '$lib/Layout/Popup.svelte';

	$: suggestion = closest($page.url.pathname.replace('/', ''), [
		'birthdays',
		'completed',
		'schedule',
		'hololive',
		'settings',
		'tools',
		'updates',
		'user',
		'wrapped'
	]);
</script>

<Popup>
	<p style="text-align: center;">
		<a href={$page.url.pathname}>{$page.url.pathname}</a> not found
	</p>

	<blockquote style="margin: 0 0 0 1.5rem;">
		Did you mean "<a
			href={suggestion}
			style={suggestion === '...' ? 'pointer-events: none; color: inherit;' : ''}
			>{suggestion.charAt(0).toUpperCase() + suggestion.slice(1)}</a
		>"?
	</blockquote>
</Popup>
