Checkmate/client/src/Components/design-elements/StatusLabel.tsx

import Box from "@mui/material/Box";
import { BaseBox } from "@/Components/design-elements";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";

import type { MonitorStatus } from "@/Types/Monitor";
import type { SxProps } from "@mui/material/styles";
import {
	getDockerStatePalette,
	getStatusPalette,
	getValuePalette,
} from "@/Utils/MonitorUtils";
import { useTheme } from "@mui/material/styles";
import { useTranslation } from "react-i18next";
import type { DockerContainerState } from "@/Types/Check";
import { SPACING } from "@/Utils/Theme/constants";

export const ValueTypes = ["positive", "negative", "neutral"] as const;
export type ValueType = (typeof ValueTypes)[number];

export const StatusLabel = ({ status, sx }: { status: MonitorStatus; sx?: SxProps }) => {
	const { t } = useTranslation();
	const theme = useTheme();
	const palette = getStatusPalette(status);

	const determineStatus = (status: MonitorStatus): string => {
		if (status === "up") {
			return t("pages.common.monitors.status.up");
		} else if (status === "down") {
			return t("pages.common.monitors.status.down");
		} else if (status === "breached") {
			return t("pages.common.monitors.status.breached");
		} else if (status === "maintenance") {
			return t("pages.common.monitors.status.maintenance");
		} else if (status === "paused") {
			return t("pages.common.monitors.status.paused");
		} else if (status === "initializing") {
			return t("pages.common.monitors.status.initializing");
		}

		return t("pages.common.monitors.status.initializing");
	};

	return (
		<BaseBox
			sx={{
				display: "inline-flex",
				flexDirection: "row",
				alignItems: "center",
				justifyContent: "center",
				padding: theme.spacing(3, 5),
				color: theme.palette[palette].main,
				borderColor:
					theme.palette.mode === "dark"
						? "rgba(255, 255, 255, 0.08)"
						: "rgba(0, 0, 0, 0.08)",
				...sx,
			}}
		>
			<Box
				width={7}
				height={7}
				bgcolor={theme.palette[palette].light}
				borderRadius="50%"
				marginRight="5px"
			/>
			<Typography textTransform={"capitalize"}>{determineStatus(status)}</Typography>
		</BaseBox>
	);
};

export const ValueLabel = ({ value, text }: { value: ValueType; text: string }) => {
	const theme = useTheme();
	const palette = getValuePalette(value);
	const transformedText = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();

	return (
		<BaseBox
			sx={{
				display: "inline-flex",
				flexDirection: "row",
				alignItems: "center",
				justifyContent: "center",
				padding: theme.spacing(3, 5),
				color: theme.palette[palette].main,
				borderColor:
					theme.palette.mode === "dark"
						? "rgba(255, 255, 255, 0.08)"
						: "rgba(0, 0, 0, 0.08)",
			}}
		>
			<Box
				width={7}
				height={7}
				bgcolor={theme.palette[palette].light}
				borderRadius="50%"
				marginRight="5px"
			/>
			<Typography>{transformedText}</Typography>
		</BaseBox>
	);
};

export const ColoredLabel = ({ text, color }: { text: string; color: string }) => {
	const theme = useTheme();

	return (
		<BaseBox
			sx={{
				width: "fit-content",
				padding: theme.spacing(1, 3),
				color: color,
				borderColor: color,
			}}
		>
			<Typography>{text}</Typography>
		</BaseBox>
	);
};

export const DockerStateLabel = ({
	state,
	name,
	image,
}: {
	state: DockerContainerState;
	name: string;
	image: string;
}) => {
	const palette = getDockerStatePalette(state);
	const theme = useTheme();

	return (
		<Stack
			direction="row"
			gap={SPACING.LG}
			alignItems={"center"}
		>
			<Box
				width={7}
				height={7}
				bgcolor={theme.palette[palette].light}
				borderRadius="50%"
				marginRight="5px"
			/>
			<Stack>
				<Typography>{name}</Typography>
				<Typography variant="body2">{image}</Typography>
			</Stack>
		</Stack>
	);
};