<script lang="ts">
	import { browser } from '$app/environment';
	import levenshtein from 'fast-levenshtein';

	$: suggestion = (() => {
		let closest = '';
		let lowestDistance = Infinity;

		[
			'birthdays',
			'completed',
			'schedule',
			'settings',
			'tools',
			'updates',
			'user',
			'wrapped',
			'...'
		].forEach((path) => {
			let distance = levenshtein.get(browser ? window.location.pathname : '...', path);

			if (distance < lowestDistance) {
				lowestDistance = distance;
				closest = path;
			}
		});

		return closest;
	})();
</script>

<p>Page not found.</p>

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