import type { FC } from "react";

import { Paper, SimpleGrid, Skeleton } from "@mantine/core";
import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";

import classes from "../../AccountPage.module.css";

const AccountPageLoading: FC = () => {
	const { t } = useTranslation();

	return (
		<LoadingSkeleton label={t("states.loadingTitle")}>
			<Skeleton height={32} width="35%" />

			<SimpleGrid
				aria-hidden="true"
				cols={{ base: 1, md: 3, sm: 2 }}
				spacing={10}
			>
				{["first", "second", "third"].map(placeholder => (
					<Paper className={classes.total} key={placeholder} withBorder>
						<Skeleton height={24} radius={4} width={40} />

						<Skeleton
							className={classes.totalAmountSkeleton}
							height={21}
							radius={4}
							width={180}
						/>
					</Paper>
				))}
			</SimpleGrid>

			<Skeleton height={260} radius="sm" />

			{["first", "second", "third"].map(placeholder => <Skeleton height={52} key={placeholder} radius="sm" />)}
		</LoadingSkeleton>
	);
};

export { AccountPageLoading };