import type { FC } from "react";

import { useAccountsPageVm } from "./AccountsPage.vm";
import { AccountsPageEmpty } from "./components/AccountsPageEmpty.view";
import { AccountsPageError } from "./components/AccountsPageError.view";
import { AccountsPageLoaded } from "./components/AccountsPageLoaded.view";
import { AccountsPageLoading } from "./components/AccountsPageLoading.view";

const AccountsPage: FC = () => {
	const vm = useAccountsPageVm();
	if (vm.state === "loading") return <AccountsPageLoading />;
	if (vm.state === "error") return <AccountsPageError {...vm} />;
	if (vm.state === "empty") return <AccountsPageEmpty />;

	return (
		<AccountsPageLoaded
			accounts={vm.accounts}
			meta={vm.meta}
			readRetry={vm.readRetry}
		/>
	);
};

export { AccountsPage };