import { Alert, Button, Group, Text } from "@mantine/core";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { apiErrorCode } from "@/shared/api";

type BankFeedbackProps = {
	error: unknown;
	retry?: () => void;
	cached?: boolean;
	loadingError?: boolean;
};
const BankFeedback: FC<BankFeedbackProps> = (props) => {
	const { t } = useTranslation();
	const code = apiErrorCode(props.error);
	return (
		<Alert color="orange" role="alert">
			<Group>
				<Text>
					{props.cached
						? t("bank.refreshError")
						: t(`bank.errors.${code}` as "bank.errors.BANK_INVALID_INPUT", {
								defaultValue: t(
									props.loadingError ? "bank.error" : "bank.requestError",
								),
							})}
				</Text>
				{props.retry && (
					<Button variant="default" onClick={props.retry}>
						{t("bank.retry")}
					</Button>
				)}
			</Group>
		</Alert>
	);
};

export { BankFeedback };