import { useTranslation } from "react-i18next";

import styles from "./AllAssetsCardInner.module.css";
import { useAllAssetsCardContext } from "./contexts/useAllAssetsCardContext";
import { GroupListView } from "./GroupListView/GroupListView";

export function AllAssetsCardInner() {
	const { t } = useTranslation("translation");
	const context = useAllAssetsCardContext();

	return (
		<div className={styles.container}>
			<div className={styles.mainContainer}>
				<div className={styles.main}>{t("All assets")}</div>
				<div className={styles.commonContainer}>
					<div className={styles.commonCountLabel}>
						{t("totalCount")}
					</div>
					<div className={styles.commonCountValue}>
						{context.assets.length.toFixed(0)}
					</div>
				</div>
			</div>

			<GroupListView key="root" />
		</div>
	);
}
