import { Center, Group, Stack } from '@mantine/core';
import { RiQuestionLine } from 'react-icons/ri';
import { useLocation, useNavigate } from 'react-router-dom';
import { Button, Text } from '/@/renderer/components';
import { AnimatedPage } from '/@/renderer/features/shared';

const InvalidRoute = () => {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <AnimatedPage>
      <Center sx={{ height: '100%', width: '100%' }}>
        <Stack>
          <Group
            noWrap
            position="center"
          >
            <RiQuestionLine
              color="var(--warning-color)"
              size={30}
            />
            <Text size="xl">Page not found</Text>
          </Group>
          <Text>{location.pathname}</Text>
          <Button
            variant="filled"
            onClick={() => navigate(-1)}
          >
            Go back
          </Button>
        </Stack>
      </Center>
    </AnimatedPage>
  );
};

export default InvalidRoute;
