import type { FC } from "react";

import { Button, Stack, Title } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import { useAppDocumentTitle } from "@/shared/ui";

const NotFoundPage: FC = () => {
	const { t } = useTranslation();
	useAppDocumentTitle(t("notFound.title"));

	return (
		<Stack>
			<Title order={1}>{t("notFound.title")}</Title>

			<StateView
				action={(
					<Button component={Link} to="/accounts">
						{t("notFound.action")}
					</Button>
				)}
				text={t("states.emptyText")}
				title={t("states.emptyTitle")}
			/>
		</Stack>
	);
};

export { NotFoundPage };