import { useTranslation } from "react-i18next";

import styles from "./AlarmAssetsCardInner.module.css";
import { useAlarmAssetsCardContext } from "./contexts/useAlarmAssetsCardContext";
import { GroupListView } from "./GroupListView/GroupListView";

export function AlarmAssetsCardInner() {
	const { t } = useTranslation("translation");
	const context = useAlarmAssetsCardContext();

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

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