<script setup lang="ts">
defineProps<{
  statusCode: number
}>()

const router = useRouter()
</script>

<template>
  <div class="h-svh">
    <div class="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
      <template v-if="statusCode === 403">
        <h1 class="text-[7rem] font-bold leading-tight">403</h1>
        <span class="font-medium">Access Forbidden</span>
        <p class="text-muted-foreground text-center">
          You don't have necessary permission <br />
          to access this resource.
        </p>
      </template>
      <template v-else-if="statusCode === 404">
        <h1 class="text-[7rem] font-bold leading-tight">404</h1>
        <span class="font-medium">Page Not Found</span>
        <p class="text-muted-foreground text-center">
          The page you are looking for <br />
          doesn't exist.
        </p>
      </template>
      <template v-else-if="statusCode === 401">
        <h1 class="text-[7rem] font-bold leading-tight">401</h1>
        <span class="font-medium">Unauthorized Access</span>
        <p class="text-muted-foreground text-center">
          Please log in with the appropriate credentials <br />
          to access this resource.
        </p>
      </template>
      <template v-else>
        <h1 class="text-[7rem] font-bold leading-tight">500</h1>
        <span class="font-medium">Internal Server Error</span>
        <p class="text-muted-foreground text-center">
          Something went wrong on our end. <br />
          Please try again later.
        </p>
      </template>
      <div class="mt-6 flex gap-4">
        <Button variant="outline" @click="router.back()"> Kembali </Button>
        <Button v-if="statusCode === 401" @click="router.push('/auth/login')">Login</Button>
        <Button v-else @click="router.push('/')">Kembali ke Dashboard</Button>
      </div>
    </div>
  </div>
</template>
