import { useEnvironment } from "../../contexts/EnvironmentContext.js";
import { localizationKeys } from "../../localization/localizationKeys.js";
import close_default from "../../icons/close.js";
import { useLocalizations } from "../../localization/makeLocalizable.js";
import { descriptors } from "../../customizables/elementDescriptors.js";
import { generateFlowPartClassname } from "../../customizables/classGeneration.js";
import { useCardState, useFlowMetadata } from "../contexts/index.js";
import { Flex, Icon } from "../../customizables/index.js";
import { CardAlert } from "./CardAlert.js";
import { IconButton } from "../IconButton.js";
import { useUnsafeModalContext } from "../Modal.js";
import React from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/elements/Card/CardContent.tsx
const CardContent = React.forwardRef((props, ref) => {
	const { children, sx,...rest } = props;
	const flowMetadata = useFlowMetadata();
	const { toggle } = useUnsafeModalContext();
	const { maintenanceMode } = useEnvironment();
	const card = useCardState();
	const { t } = useLocalizations();
	return /* @__PURE__ */ jsxs(Flex, {
		direction: "col",
		className: generateFlowPartClassname(flowMetadata),
		elementDescriptor: descriptors.card,
		sx: [(t$1) => ({
			backgroundColor: t$1.colors.$colorBackground,
			transitionProperty: t$1.transitionProperty.$common,
			transitionDuration: "200ms",
			textAlign: "center",
			zIndex: t$1.zIndices.$card,
			borderWidth: t$1.borderWidths.$normal,
			borderStyle: t$1.borderStyles.$solid,
			borderColor: t$1.colors.$borderAlpha150,
			borderRadius: t$1.radii.$lg,
			position: "relative",
			padding: `${t$1.space.$8} ${t$1.space.$10}`,
			justifyContent: "center",
			alignContent: "center",
			marginBlockStart: "-1px",
			marginInline: "-1px"
		}), sx],
		gap: 8,
		ref,
		...rest,
		children: [
			toggle && /* @__PURE__ */ jsx(IconButton, {
				elementDescriptor: descriptors.modalCloseButton,
				variant: "ghost",
				"aria-label": "Close modal",
				onClick: toggle,
				icon: /* @__PURE__ */ jsx(Icon, {
					icon: close_default,
					size: "xs"
				}),
				sx: (t$1) => ({
					color: t$1.colors.$colorMutedForeground,
					zIndex: t$1.zIndices.$modal,
					position: "absolute",
					top: t$1.space.$2,
					right: t$1.space.$2,
					padding: t$1.space.$3
				})
			}),
			maintenanceMode && !card.error && /* @__PURE__ */ jsx(CardAlert, {
				variant: "warning",
				children: t(localizationKeys("maintenanceMode"))
			}),
			children
		]
	});
});

//#endregion
export { CardContent };
//# sourceMappingURL=CardContent.js.map