import type { FC } from "react";

import { Alert, Button, Skeleton } from "@mantine/core";
import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";

type TbankConnectionErrorProps = {
	retry: () => void;
};

const TbankConnectionLoading: FC = () => {
	const { t } = useTranslation();

	return (
		<LoadingSkeleton label={t("states.loadingTitle")}>
			<Skeleton height={20} width="45%" />

			<Skeleton height={36} radius="sm" width={140} />
		</LoadingSkeleton>
	);
};

const TbankConnectionError: FC<TbankConnectionErrorProps> = (props) => {
	const { retry } = props;
	const { t } = useTranslation();

	return (
		<Alert color="red" title={t("tbank.statusError")}>
			<Button onClick={retry} variant="subtle">
				{t("tbank.retry")}
			</Button>
		</Alert>
	);
};

export { TbankConnectionError, TbankConnectionLoading };