import { Typography as Typography$1 } from "../../UI/dataDisplay/typography/Typography.mjs";
import { useBuildEnvironment } from "./useBuildEnvironment.mjs";
import { useTenant } from "../../utilities/tenant/useTenant.mjs";
import React from "react";
import { makeStyles } from "@material-ui/core";
//#region src/shell/ui/EnvironmentRibbon.tsx
const useStyles = makeStyles({
	root: {
		width: "100vw",
		height: 25,
		backgroundColor: ({ environment }) => `var(--env-ribbon-${environment})`,
		color: "#ffffff",
		display: "flex",
		alignItems: "center",
		position: "relative",
		"&.staging": { color: "#000000" }
	},
	centerText: {
		position: "absolute",
		left: "50%",
		transform: "translateX(-50%)",
		fontWeight: 600
	},
	rightText: {
		position: "absolute",
		right: "10px",
		fontWeight: 500
	}
});
const EnvironmentRibbon = () => {
	const tenantInfo = useTenant();
	const buildEnvironment = useBuildEnvironment();
	const classes = useStyles({ environment: buildEnvironment });
	if (!buildEnvironment) return null;
	return /* @__PURE__ */ React.createElement("div", {
		className: `${classes.root} ${buildEnvironment === "staging" ? "staging" : ""}`,
		id: "udp-environment-banner"
	}, /* @__PURE__ */ React.createElement(Typography$1, { className: classes.centerText }, buildEnvironment?.charAt(0).toUpperCase() + buildEnvironment?.slice(1) || ""), /* @__PURE__ */ React.createElement(Typography$1, { className: classes.rightText }, tenantInfo?.activeTenant?.tenantName));
};
//#endregion
export { EnvironmentRibbon };

//# sourceMappingURL=EnvironmentRibbon.mjs.map