/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-f1f3d22 | Cube Dev Team */
import { tasty } from "../../../tasty/tasty.js";
import { Block } from "../../Block.js";
import { CheckIcon } from "../../../icons/CheckIcon.js";
import { CloseIcon } from "../../../icons/CloseIcon.js";
import { ExclamationIcon } from "../../../icons/ExclamationIcon.js";
import { InfoIcon } from "../../../icons/InfoIcon.js";
import { Action } from "../../actions/Action/Action.js";
import { Card } from "../../content/Card/Card.js";
import themes_default from "../../../data/themes.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/overlays/Notification/Notification.tsx
const NotificationElement = tasty(Card, {
	role: "region",
	styles: {
		display: "grid",
		color: "#dark-02",
		padding: ".5x",
		shadow: true,
		border: false,
		margin: "1x bottom",
		radius: "1x",
		gridColumns: "auto 1fr auto",
		placeItems: "center start",
		gap: "2x",
		preset: "t3",
		Icon: {
			display: "flex",
			radius: "1r",
			width: "5x",
			height: "5x",
			placeContent: "center",
			placeItems: "center",
			preset: "t2",
			color: {
				"": "#dark-02",
				...Object.keys(themes_default).reduce((map, theme) => {
					map[`theme=${theme}`] = themes_default[theme].color;
					return map;
				}, {})
			},
			fill: {
				"": "#clear",
				...Object.keys(themes_default).reduce((map, theme) => {
					map[`theme=${theme}`] = themes_default[theme].fill;
					return map;
				}, {})
			}
		}
	}
});
const CloseButton = tasty(Action, { styles: {
	color: {
		"": "#dark-02",
		hovered: "#primary"
	},
	width: "5x",
	height: "5x",
	label: "Close"
} });
function Notification(allProps) {
	let { theme, type, children, onClose, ...props } = allProps;
	theme = theme || type || "note";
	let Icon;
	switch (theme) {
		case "success":
			Icon = CheckIcon;
			break;
		case "danger":
			Icon = ExclamationIcon;
			break;
		default:
			Icon = InfoIcon;
			break;
	}
	return /* @__PURE__ */ jsxs(NotificationElement, {
		...props,
		"data-theme": theme,
		children: [
			/* @__PURE__ */ jsx("div", {
				"data-element": "Icon",
				children: /* @__PURE__ */ jsx(Icon, {})
			}),
			/* @__PURE__ */ jsx(Block, { children }),
			/* @__PURE__ */ jsx(CloseButton, {
				onPress: onClose,
				children: /* @__PURE__ */ jsx(CloseIcon, {})
			})
		]
	});
}

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