<script lang="ts" setup>
import { useService } from '@factor/api'
import ElZeroState from './ElZeroState.vue'
import ElButton from './ElButton.vue'
import ElPanel from './ElPanel.vue'
import type { FactorUi } from '.'

useService<{
  factorUi: FactorUi
}>()
</script>

<template>
  <ElPanel title="Page Not Found">
    <ElZeroState title="Not Found" note="We couldn't find this page.">
      <template #action>
        <ElButton btn="primary" to="/">
          Home &rarr;
        </ElButton>
      </template>
    </ElZeroState>
  </ElPanel>
</template>
