import type { FC } from "react";

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

import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";

type AccountEventsPageErrorProps = {
	onReset: () => void;
	readRetry: ReadRetryProps;
};

const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
	const { t } = useTranslation();

	return (
		<StateView
			action={(
				<Group>
					{props.readRetry.exhausted && (
						<ReadRetryButton
							onRetry={props.readRetry.onRetry}
							retrying={props.readRetry.retrying}
						/>
					)}

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

export { AccountEventsPageError };