---
// src/pages/404.astro
import MainLayout from "../layouts/MainLayout.astro";
import { getPath } from "../utils/paths";
import { Icon } from "astro-icon/components";

interface props {
    title: string;
}

const { title = "404" } = Astro.props;
---

<div class="flex flex-col items-center justify-center min-h-[60vh] w-full py-12 error-component">
    <div
        class="w-full sm:max-w-lg -mx-4 sm:mx-0 bg-red-50 text-red-500 p-0 sm:rounded-lg sm:shadow border-y-2 sm:border-2 border-red-500 text-center"
    >
        <h1
            class="bg-red-500 text-white text-4xl font-bold py-2 px-4 font-mono flex items-center justify-center gap-3"
        >
            <span class="relative grid h-9 w-9">
                <Icon
                    name="tabler:triangle-filled"
                    class="col-start-1 row-start-1 size-9 animate-ping opacity-75 translate-x-[-0.25px] translate-y-[-1.5px] blur-[1px]"
                />
                <Icon
                    name="tabler:alert-triangle"
                    class="col-start-1 row-start-1 size-9 relative"
                />
            </span>
            Fehler {title}
        </h1>

        <p class="mb-4 text-red-500 py-2 px-4 text-lg">
            <slot />
            <a
                href={getPath("/")}
                class="flex items-center justify-center gap-1 font-semibold text-red-500 hover:text-white hover:bg-red-500 rounded-full px-4 py-2 hover:drop-shadow transition-colors duration-300 mt-2"
            >
                <Icon name="tabler:arrow-big-left" class="size-5" />
                Zurück zur Startseite
            </a>
        </p>
    </div>
</div>
<style>
    @reference "../styles/global.css";
    .error-component :global(br) {
        @apply mb-3;
    }

    .error-component .animate-ping {
        animation-duration: 2s;
    }
</style>