---
import { DiscordLogoIcon, HomeIcon } from '@radix-ui/react-icons';
import { Button, Flex, Heading, Link, Text } from '@radix-ui/themes';
import { LinkI18n } from '../components/LinkI18n';
import { PageWrapper } from '../components/PageWrapper';
import BaseLayout from '../layouts/BaseLayout.astro';

const { locale } = Astro.params;
---

<BaseLayout>
  <PageWrapper>
    <Flex direction="column" justify="center" align="center" flexGrow="1">
      <Heading>404: page not found</Heading>
      <Text color="gray">Where would you like to go?</Text>

      <Flex mt="4" gap="2">
        <LinkI18n {locale} href="/">
          <Button>
            <HomeIcon /> Home
          </Button>
        </LinkI18n>
        <Link href="https://discord.gg/nDt7AjGJQH">
          <Button variant="outline">
            <DiscordLogoIcon /> Discord
          </Button>
        </Link>
      </Flex>
    </Flex>
  </PageWrapper>
</BaseLayout>