import type { FC } from "react";

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

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

import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";

type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;

const AccountIncomePageError: FC<ErrorProps> = (props) => {
	const { t } = useTranslation();

	const retry = props.readRetry.exhausted
		? (
				<ReadRetryButton
					onRetry={props.readRetry.onRetry}
					retrying={props.readRetry.retrying}
				/>
			)
		: undefined;

	return (
		<StateView
			action={retry}
			error
			text={t("income.errorText")}
			title={t("income.errorTitle")}
		/>
	);
};

export { AccountIncomePageError };