<script lang="ts">
  import { browser } from '$app/environment';
  import { page } from '$app/stores';
  import Button from '$lib/components/dashboard/elements/Button.svelte';
  import NoSuchUser from '$lib/components/screens/NoSuchUser.svelte';

  $: loading = false;
  $: (() => {
    if (browser && window) window.onbeforeunload = null;
  })();
</script>

<svelte:head>
  <title>YourSitee</title>
</svelte:head>

<div class="flex justify-center items-center h-full p-8">
  {#if $page.error?.code === 'NO_SUCH_USER'}
    <NoSuchUser username={$page.url.pathname.split('/')[1]} />
  {:else}
    <div class="flex flex-col gap-4 w-[400px]">
      <div>
        <p class="text-[32px] font-bold">⚠️ An error occurred</p>
        <p class="text-secondary">
          {$page.data?.error ?? $page.error?.message ?? $page.error?.code ?? 'Unexpected error'}
        </p>
      </div>

      <Button
        {loading}
        onClick={() => {
          loading = true;
          location.reload();
        }}>Reload</Button>
    </div>
  {/if}
</div>
