import type { FC } from "react";

import { useAccountOperationsPageVm } from "./AccountOperationsPage.vm";
import { AccountOperationsPageError } from "./components/AccountOperationsPageError.view";
import { AccountOperationsPageLoaded } from "./components/AccountOperationsPageLoaded.view";
import { AccountOperationsPageLoading } from "./components/AccountOperationsPageLoading.view";

const AccountOperationsPage: FC = () => {
	const vm = useAccountOperationsPageVm();

	if (vm.state === "loading") {
		return <AccountOperationsPageLoading />;
	}

	return vm.state === "error"
		? <AccountOperationsPageError {...vm} />
		: <AccountOperationsPageLoaded {...vm} />;
};

export { AccountOperationsPage };