import { useTranslation } from "react-i18next";

import { GoodIcon, WarningIcon, OfflineIcon } from "../icons";

import styles from "./AssetStateView.module.css";

interface Props {
	hasAlarms: boolean;
	isOnline: boolean;
}

export function AssetStateView(props: Props) {
	const { t } = useTranslation("translation");

	return (
		<div className={styles.wrapper}>
			<div
				className={`${styles.container} ${props.hasAlarms
						? styles.error
						: props.isOnline
							? styles.success
							: styles.offline
					}`}
			>
				<div className={styles.icon}>
					{props.hasAlarms ? (
						<WarningIcon color="#ffffff" />
					) : props.isOnline ? (
						<GoodIcon color="#ffffff" />
					) : (
						<OfflineIcon color="#ffffff" />
					)}
				</div>
				<div className={styles.text}>
					{props.hasAlarms
						? t("Object with alarms")
						: props.isOnline
							? t("Object is ok")
							: t("Object is offline")}
				</div>
			</div>
		</div>
	);
}
