import type { FC } from "react";

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

const skeletonRowIds = ["first", "second", "third", "fourth"];

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

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

			<Group grow>
				<Skeleton height={48} radius="sm" />

				<Skeleton height={48} radius="sm" />
			</Group>

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

			<Group>
				<Skeleton height={36} radius="sm" width={110} />

				<Skeleton height={36} radius="sm" width={110} />
			</Group>

			<Stack gap="xs">
				{skeletonRowIds.map(id => <Skeleton height={64} key={id} radius="md" />)}
			</Stack>
		</LoadingSkeleton>
	);
};

export { AccountOperationsPageLoading };