import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import Link from "../link/link.js";
import P from "../p/p.js";
import { useHeaderContext } from "./context.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/header/headerServicesMessage.tsx
/** Displays a message with link to Marketplace if user has no services available. */
const HeaderServicesMessage = vui((props, ref) => {
	const { children, className, ...rest } = props;
	const { links } = useHeaderContext() ?? {};
	const styles = useStyleConfig("Header", useHeaderContext());
	return /* @__PURE__ */ jsx(P, {
		className: cs("vui-headerServicesMessage", className),
		mb: 2,
		ml: 2,
		ref,
		...styles.servicesMessage,
		...rest,
		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
			"No services available. ",
			/* @__PURE__ */ jsx("br", {}),
			"Explore more on the",
			" ",
			/* @__PURE__ */ jsx(Link, {
				href: links?.marketplace,
				isUnderlined: true,
				children: "marketplace"
			}),
			"."
		] })
	});
});
HeaderServicesMessage.displayName = "HeaderServicesMessage";

//#endregion
export { HeaderServicesMessage as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=headerServicesMessage.js.map