import { hexToRGBAStr } from "../styles/colors.js";
import { TextIconAligner } from "./TextIconAligner.js";
import styled from "@emotion/styled";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/components/BlockAlert.tsx
function BlockAlert({ text, type = "info" }) {
	return /* @__PURE__ */ jsx(StyledBlockAlert, {
		type,
		children: /* @__PURE__ */ jsx(TextIconAligner, {
			content: text,
			typography: { size: "ExtraSmall" },
			leftIcon: {
				name: type === "info" ? "Info" : type === "success" ? "CircleCheckOutline" : "ExclamationPoint",
				width: 16,
				mr: 12,
				color: type === "info" ? "info" : type === "success" ? "success" : "danger"
			}
		})
	});
}
const StyledBlockAlert = styled.div`
  padding: 16px;
  border-radius: 6px;
  font-weight: 500;

  color: ${({ type, theme }) => type === "info" ? theme.info : type === "success" ? theme.success : theme.danger};

  background-color: ${({ type, theme }) => type === "info" ? hexToRGBAStr(theme.info, .1) : type === "success" ? hexToRGBAStr(theme.success, .1) : hexToRGBAStr(theme.danger, .1)};
`;
//#endregion
export { BlockAlert };
