<script lang="ts" setup>
import { computed } from 'vue';
import { $t } from '@/locales';
import { useRouterPush } from '@/hooks/common/router';

defineOptions({ name: 'ExceptionBase' });

type ExceptionType = '403' | '404' | '500';

interface Props {
  /**
   * Exception type
   *
   * - 403: no permission
   * - 404: not found
   * - 500: service error
   */
  type: ExceptionType;
}

const props = defineProps<Props>();

const { routerPushByKey } = useRouterPush();

const iconMap: Record<ExceptionType, string> = {
  '403': 'no-permission',
  '404': 'not-found',
  '500': 'service-error'
};

const textMap: Record<ExceptionType, string> = {
  '403': '403 Forbidden',
  '404': '404 Not Found',
  '500': '500 Internal Server Error'
};

const icon = computed(() => iconMap[props.type]);
const text = computed(() => textMap[props.type]);
</script>

<template>
  <div class="size-full min-h-520px flex-col-center gap-24px overflow-hidden">
    <!-- <div class="flex text-400px text-primary">
      <SvgIcon :local-icon="icon" />
    </div> -->
    <h3 class="text-18px text-primary font-500">{{ text }}</h3>
    <AButton type="primary" @click="routerPushByKey('root')">{{ $t('common.backToHome') }}</AButton>
  </div>
</template>

<style scoped></style>
