import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import Button from "../button/button.js";
import { useHeaderContext } from "./context.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/header/headerNotifications.tsx
const Badge = styled.spanBox`
  align-items: center;
  background-color: energyRed.45;
  border-radius: round;
  color: white;
  display: flex;
  font-size: 12px;
  font-weight: medium;
  height: 20px;
  justify-content: center;
  position: absolute;
  right: 1px;
  top: 1px;
  min-width: 20px;
`;
/** Icon link to Veracity notifications engine with an optional number of new notifications. */
const HeaderNotifications = vui((props, ref) => {
	const { children, className, count = 0, url, ...rest } = props;
	const { links } = useHeaderContext() ?? {};
	const styles = useStyleConfig("Header", useHeaderContext()).notifications;
	return /* @__PURE__ */ jsx(Button, {
		as: "a",
		className: cs("vui-headerNotifications", className),
		href: url ?? links.notifications,
		minW: 0,
		position: "relative",
		px: "9px",
		ref,
		size: "lg",
		title: "Notifications",
		variant: "tertiaryDark",
		...styles.container,
		...rest,
		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button.Icon, { name: "uiBell" }), count > 0 && /* @__PURE__ */ jsx(Badge, {
			px: count < 9 ? "0" : "4px",
			right: count < 9 ? 1 : 0,
			children: count < 100 ? count : "99+"
		})] })
	});
});
HeaderNotifications.displayName = "HeaderNotifications";

//#endregion
export { HeaderNotifications as default };
globalThis.__vuiVersion__ = "4.0.0"
//# sourceMappingURL=headerNotifications.js.map