import type { FC } from "react";

import { useAccountsPageViewModel } 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 viewModel = useAccountsPageViewModel();
	if (viewModel.state === "loading") return <AccountsPageLoading />;
	if (viewModel.state === "error") return <AccountsPageError {...viewModel} />;
	if (viewModel.state === "empty") return <AccountsPageEmpty />;

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

export { AccountsPage };