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

$: 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> {$locale().errors?.routeNotFound}
  </p>

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