import type { FC } from "react";

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

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

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

export { TbankConnectionSection };