import { Link } from '@/i18n/navigation';
import { Flex, Text, Button, VStack, Heading } from '@chakra-ui/react';
import { getTranslations } from 'next-intl/server';

export default async function NotFoundPage() {
  const t = await getTranslations();

  return (
    <Flex h='100vh' alignItems='center' justifyContent='center' textAlign='center' px={6}>
      <VStack spaceY={6}>
        <Heading
          as='h1'
          fontSize={{ base: '5xl', md: '6xl' }}
          fontWeight='bold'
          color={{ base: 'primary.600', _dark: 'primary.400' }}
        >
          {t('error.404')}
        </Heading>
        <Text fontSize={{ base: 'md', md: 'lg' }} color={{ base: 'fg.muted', _dark: 'white' }}>
          {t('error.not-found')}
        </Text>
        <Link href='/home' passHref>
          <Button size={{ base: 'md', md: 'lg' }} rounded='md'>
            {t('error.back-to-home')}
          </Button>
        </Link>
      </VStack>
    </Flex>
  );
}