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>
  );
}
