import { Paper, Skeleton, Stack } from "@mantine/core";
import { LoadingSkeleton } from "@wealthledger/ui";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import classes from "../AccountIncomePage.module.css";

const AccountIncomePageLoading: FC = () => {
	const { t } = useTranslation();
	return (
		<LoadingSkeleton label={t("states.loadingTitle")}>
			<Stack gap="lg">
				<Skeleton height={32} width="40%" />
				<Paper p="md" radius="md" withBorder>
					<Stack gap="sm">
						<Skeleton height={20} width="20%" />
						<div className={classes.fields}>
							<Skeleton height={60} />
							<Skeleton height={60} />
						</div>
						<Skeleton height={44} width="45%" />
					</Stack>
				</Paper>
				<Skeleton height={100} radius="md" />
				<Skeleton height={180} radius="md" />
				<Skeleton height={24} width="25%" />
				<Skeleton height={80} radius="md" />
				<Skeleton height={80} radius="md" />
			</Stack>
		</LoadingSkeleton>
	);
};

export { AccountIncomePageLoading };