<script lang="ts" setup>
defineProps<{
  icon: string
  title: string
  message: string
}>()
</script>

<template>
  <div class="flex flex-grow flex-col items-center justify-center p-4 text-center min-h-[30rem]">
    <div class="max-w-md w-full p-6 bg-white rounded-xl shadow-lg">
      <div class="text-6xl mb-4">
        <span v-if="icon" class="block text-blue-500">{{ icon }}</span>
        <span v-else>❓</span>
      </div>
      <h1 class="text-2xl font-bold mb-2">{{ title }}</h1>
      <p class="text-gray-600 mb-6">{{ message }}</p>
      <router-link
          to="/"
          class="inline-block px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200"
      >
        返回首页
      </router-link>
    </div>
  </div>
</template>

<style scoped>

</style>