interface NotFoundProps {
  showActionsBack?: boolean;
  showActionsHome?: boolean;
  onClickGoBack?(): void;
  onClickBackToHome?(): void;
  homeUrl?: string;
}

import { Title, Text, Button, Container, Stack, Group, Center } from '@mantine/core';
import { useNavigate } from 'react-router-dom';

export function NotFound({
  showActionsBack = true,
  showActionsHome = true,
  onClickGoBack,
  onClickBackToHome,
  homeUrl,
}: NotFoundProps) {
  const navigate = useNavigate();

  function onBack() {
    if (onClickGoBack) onClickGoBack();
    else navigate(-1);
  }

  function onBackHome() {
    if (onClickBackToHome) onClickBackToHome();
    else if (homeUrl) navigate(homeUrl, { replace: true });
  }

  return (
    <Container size="sm" h="100vh" pos="relative">
      <Center h="100%">
        <Stack align="center" ta="center" gap="md">
          <Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
            404 Error
          </Text>

          <Title order={1} fw={900} c="brand">
            Page Not Found
          </Title>

          <Text size="md" c="dimmed">
            Sorry, the page you’re looking for doesn’t exist or has been moved.
          </Text>

          {(showActionsBack || showActionsHome) && (
            <Group mt="xl" justify="center">
              {showActionsBack && (
                <Button variant="default" size="md" onClick={onBack}>
                  Go Back
                </Button>
              )}

              {showActionsHome && (
                <Button color="brand" size="md" onClick={onBackHome}>
                  Back to Home
                </Button>
              )}
            </Group>
          )}
        </Stack>
      </Center>
    </Container>
  );
}