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

type AccountsPageErrorProps = { code?: string; retry?: () => void };

const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
	const { code, retry } = props;
	const { t } = useTranslation();
	const settingsAction = (
		<Button component={Link} to="/settings" variant="light">
			{t("accounts.openSettings")}
		</Button>
	);
	if (code === "TBANK_NOT_CONNECTED")
		return (
			<StateView
				error
				title={t("accounts.notConnectedTitle")}
				text={t("accounts.notConnectedText")}
				action={settingsAction}
			/>
		);
	if (code === "INVALID_TBANK_TOKEN")
		return (
			<StateView
				error
				title={t("accounts.invalidTokenTitle")}
				text={t("accounts.invalidTokenText")}
				action={settingsAction}
			/>
		);
	if (code === "TBANK_UNAVAILABLE")
		return (
			<StateView
				error
				title={t("accounts.unavailableTitle")}
				text={t("accounts.unavailableText")}
				action={
					<Stack align="flex-start">
						<Button onClick={retry}>{t("accounts.retry")}</Button>
						{settingsAction}
					</Stack>
				}
			/>
		);
	return (
		<StateView
			error
			title={t("states.errorTitle")}
			text={t("states.errorText")}
			action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
		/>
	);
};

export { AccountsPageError };