import type { FC } from "react";

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

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

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

			<Skeleton height={20} width="45%" />

			<SimpleGrid aria-hidden="true" cols={1} spacing="lg">
				{[0, 1].map(index => (
					<Card key={index} padding="xl" radius="lg" withBorder>
						<Stack gap="xl">
							<Stack gap="sm">
								<Skeleton height={24} width="35%" />

								<Skeleton height={28} width="65%" />
							</Stack>

							<Stack gap="xs">
								<Skeleton height={16} width="30%" />

								<Skeleton height={40} width="60%" />
							</Stack>

							<Group grow>
								<Skeleton height={56} />

								<Skeleton height={56} />
							</Group>

							<Skeleton height={20} />
						</Stack>
					</Card>
				))}
			</SimpleGrid>
		</LoadingSkeleton>
	);
};

export { AccountsPageLoading };