<script setup lang="ts">
import type { NuxtError } from "#app";

const props = defineProps({
  error: Object as () => NuxtError,
});

const handleError = () => clearError({ redirect: "/" });
</script>

<template>
  <section class="min-h-screen flex justify-center">
    <div class="container mx-auto flex md:flex-row flex-col items-center">
      <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
        <img
          class="object-cover object-center rounded"
          alt="hero"
          src="~/assets/img/404-error.svg"
        />
      </div>
      <div
        class="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center gap-2"
      >
        <img
          src="~/assets/img/logo.svg"
          alt="Estúdio AANY"
          class="max-w-64 pb-5"
        />
        <h1
          class="text-balance sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
        >
          Se perdeu no caminho?
        </h1>
        <p class="mb-8 leading-relaxed text-balance">
          Parece que a página que você está procurando não existe. Que tal
          voltar para a página inicial e começar de novo?
        </p>
        <div class="flex justify-center">
          <UButton size="xl" @click="handleError"
            >Voltar para a página inicial</UButton
          >
        </div>
      </div>
    </div>
  </section>
</template>
