import type { FC } from "react";

import {
	TbankConnectionError,
	TbankConnectionLoading,
} from "./TbankConnectionSection.view";
import { useTbankConnectionSectionVm } from "./TbankConnectionSection.vm";
import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded";

const TbankConnectionSection: FC = () => {
	const vm = useTbankConnectionSectionVm();
	if (vm.state === "loading") return <TbankConnectionLoading />;

	return vm.state === "error"
		? <TbankConnectionError retry={vm.retry} />
		: <TbankConnectionSectionLoaded {...vm} />;
};

export { TbankConnectionSection };