<script lang="ts">
  import { page } from '$app/stores';
  import { useTranslate } from '$lib/translations';
  import Icon from '@iconify/svelte';
  import '$lib/iconify-offline';

  const t = useTranslate();
  const status = $derived($page.status);
  const message = $derived($page.error?.message ?? '');
  const isNotFound = $derived(status === 404);
</script>

<svelte:head>
  <title>{isNotFound ? t('page_404_title') : `Fehler ${status}`}</title>
  <meta name="robots" content="noindex" />
</svelte:head>

<section>
  <div class="container-custom pt-10 text-center">
    <p class="mt-6 text-7xl md:text-8xl font-extrabold tracking-tight text-wald-700">{status}</p>
    <h1 class="mt-3 text-2xl md:text-3xl font-semibold text-zinc-900">
      {isNotFound ? t('page_404_title') : `Fehler ${status}`}
    </h1>
    {#if isNotFound}
      <p class="mx-auto mt-4 max-w-xl text-base text-zinc-600">{t('page_404_text')}</p>
    {:else if message}
      <p class="mx-auto mt-4 max-w-xl text-base text-zinc-600">{message}</p>
    {/if}

    <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
      <a
        href="/"
        class="inline-flex items-center gap-2 rounded-sm bg-wald-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-wald-800 no-underline"
      >
        <Icon icon="mdi:home-outline" class="h-4 w-4" />
        {t('page_404_back')}
      </a>
      <a
        href="/posts/"
        class="inline-flex items-center gap-2 rounded-sm border border-zinc-300 bg-white px-5 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-100 no-underline"
      >
        <Icon icon="mdi:file-document-outline" class="h-4 w-4" />
        Zu den Beiträgen
      </a>
    </div>
  </div>
</section>
