import type { FC } from "react";

import { Button } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";

import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";

type AccountOperationsPageErrorProps = Extract<
	AccountOperationsPageViewModel,
	{ state: "error" }
>;

const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
	props,
) => {
	const { t } = useTranslation();

	return (
		<StateView
			action={(
				<Button onClick={props.onReset} variant="default">
					{t("ledger.reset")}
				</Button>
			)}
			text={t("ledger.errorText")}
			title={t("ledger.errorTitle")}
		/>
	);
};

export { AccountOperationsPageError };