<template>
  <div class="min-h-[60vh] flex items-center justify-center">
    <UCard class="max-w-md w-full text-center">
      <template #header>
        <UIcon
          name="i-heroicons-no-entry"
          class="w-16 h-16 mx-auto text-red-500 mb-4"
        />
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          403 - 禁止访问
        </h1>
      </template>

      <p class="text-gray-600 dark:text-gray-400 mb-6">
        抱歉，您没有权限访问此页面。
      </p>

      <div class="flex justify-center space-x-4">
        <UButton to="/" color="indigo">
          返回首页
        </UButton>
        <UButton v-if="!isAuthenticated" to="/login" variant="outline">
          登录
        </UButton>
      </div>
    </UCard>
  </div>
</template>

<script setup lang="ts">
const { isAuthenticated } = useAuth()

useSeoMeta({
  title: '403 - 禁止访问',
})
</script>
