import { Button } from '@astryxdesign/core/Button'
import { Center } from '@astryxdesign/core/Center'
import { Heading } from '@astryxdesign/core/Heading'
import { Text } from '@astryxdesign/core/Text'
import { VStack } from '@astryxdesign/core/VStack'
import { Page } from '../components/Page'

export function NotFoundPage() {
  return (
    <Page>
      <Center minHeight={520}>
        <VStack gap={4} hAlign="center" maxWidth={440}>
          <Text type="label" color="accent">
            404
          </Text>
          <Heading level={1} type="display-3" justify="center">
            页面未找到
          </Heading>
          <Text type="body" color="secondary" as="p" justify="center">
            这个模板里没有你访问的路由。回到概览页，再选择一个目的地吧。
          </Text>
          <Button label="返回概览" variant="primary" href="/" />
        </VStack>
      </Center>
    </Page>
  )
}