frontend/src/entities/bank-card/ui/BankFeedback.tsx

import type { FC } from "react";

import { Alert, Button, Group, Text } from "@mantine/core";
import { useTranslation } from "react-i18next";

import { errorCode } from "../model/error-code";

type BankFeedbackProps = {
	cached?: boolean;
	error: unknown;
	loadingError?: boolean;
	retry?: () => void;
};

const BankFeedback: FC<BankFeedbackProps> = (props) => {
	const { t } = useTranslation();
	const code = errorCode(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 onClick={props.retry} variant="default">
						{t("bank.retry")}
					</Button>
				)}
			</Group>
		</Alert>
	);
};

export { BankFeedback };