<template>
  <div
    v-if="props.error !== undefined"
    :class='[
      "fixed","inset-0", "flex", "z-50", "wrap-break-word",
      "items-center", "justify-center", "text-center",
      "bg-black/50",
    ]'
  >
    <div :class='[
      "bg-white", "text-black",
      "dark:bg-neutral-600", "dark:text-white",
      "shadow-lg", "w-80",
      "p-6", "gap-2", "rounded-lg",
      "flex", "flex-col",
    ]'>
      <span class="text-lg font-semibold">問題が発生しました</span>
      <SmallText v-html='
        props.error
          ? (props.error instanceof Error
            ? props.error.message
            : String(props.error).replaceAll(/\n/g, "<br>")
        ) : "不明なエラー"
      '/>
      
      <Button
        @click="reload"
        :disabled="isReloading"
        class="m-auto"
      >
        <span v-if="isReloading">再読み込み中...</span>
        <span v-else>再読み込み</span>
      </Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Button from "@/components/Button.vue";
import SmallText from "@/components/SmallText.vue";
import { ref } from "vue";

const props = defineProps<{
  error?: any;
}>();

const isReloading = ref<boolean>(false);

const reload = () => {
  isReloading.value = true;
  window.location.reload();
}
</script>