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

const AccountPageLoading: FC = () => {
	const { t } = useTranslation();
	return (
		<LoadingSkeleton label={t("states.loadingTitle")}>
			<Skeleton height={32} width="35%" />
			<SimpleGrid
				cols={{ base: 1, sm: 2, md: 3 }}
				spacing={10}
				aria-hidden="true"
			>
				{[0, 1, 2].map((index) => (
					<Paper key={index} className={classes.total} withBorder>
						<Skeleton height={24} width={40} radius={4} />
						<Skeleton
							height={21}
							width={180}
							radius={4}
							className={classes.totalAmountSkeleton}
						/>
					</Paper>
				))}
			</SimpleGrid>
			<Skeleton height={260} radius="sm" />
			{[0, 1, 2].map((index) => (
				<Skeleton key={index} height={52} radius="sm" />
			))}
		</LoadingSkeleton>
	);
};

export { AccountPageLoading };