<script setup>
const props = defineProps({
  error: Object,
});
console.error(props.error);
const router = useRouter();
const { $createMeta } = useNuxtApp();
const description =
  "Rất tiếc! Có vẻ như đã xảy ra sự cố. Vui lòng thử lại hoặc liên hệ quản trị viên nếu lỗi tiếp tục.";
useHead(
  $createMeta({
    title: props.error.message,
    description,
    image: "/favicon.svg",
    type: "website",
  }),
);

function reload() {
  window.location.reload();
}
</script>

<template>
  <div
    class="container h-dvh is-flex is-gap-2 is-flex-direction-column is-justify-content-center is-align-items-center"
  >
    <Icon
      name="material-symbols:warning-rounded"
      :size="50"
    />
    <h1 class="font-semibold is-size-3">Đã xảy ra sự cố</h1>
    <p class="has-text-grey">
      {{ description }}
    </p>
    <div class="buttons">
      <button
        @click="reload"
        class="button"
      >
        <span class="icon">
          <Icon
            name="material-symbols:refresh-rounded"
            :size="18"
          />
        </span>
        <span>Thử lại</span>
      </button>
      <button
        @click="router.push('/')"
        class="button"
      >
        <span class="icon">
          <Icon
            name="material-symbols:home-outline-rounded"
            :size="18"
          />
        </span>
        <span>Trang chủ</span>
      </button>
    </div>
  </div>
</template>
