"use client";
import { StyledHeadline } from "../typography/base/Headline.js";
import { isReactNodeWithChildren } from "../../utils/isReactNodeWithChildren.js";
import React from "react";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/components/documentation/DocsHeadline.tsx
const getHeadlineText = (element) => {
	if (typeof element === "string") return element;
	if (Array.isArray(element)) return getHeadlineText(element[0]);
	if (isReactNodeWithChildren(element)) return getHeadlineText(element.props.children);
	throw new Error("Could not find text in Headline element: " + (typeof element === "object" ? JSON.stringify(element) : String(element)));
};
/**
* Assumes the element is a header element containing a link with an href.
* Getting the id from the href ensures we get the id that remains
* compatible with the links generated automatically in the markdown
* with the rehypeAutolinkHeadings plugin. Otherwise, anchor links will not
* work.
*/
const getHeaderId = (element) => {
	if (React.isValidElement(element) && element?.type === "a" && "href" in element.props) {
		const props = element.props;
		return getHeaderId(props.href);
	}
	if (typeof element === "string") return element.replace("#", "");
	if (Array.isArray(element)) return getHeaderId(element[0]);
	if (isReactNodeWithChildren(element)) return getHeaderId(element.props.children);
	throw new Error("Could not find text in Headline element: " + (typeof element === "object" ? JSON.stringify(element) : String(element)));
};
const toKebabCase = (str) => {
	return str.replaceAll(" ", "-").toLowerCase();
};
const DocsHeadline = ({ children, color, size = "Medium", heading = "h1", onClick, textAlign, underline = false }) => {
	return /* @__PURE__ */ jsx(StyledHeadline, {
		as: heading,
		id: toKebabCase(getHeaderId(children)),
		size,
		colorProp: color,
		displayProp: "block",
		hideOverflow: false,
		textAlign,
		onClick,
		underline,
		block: true,
		children
	});
};
//#endregion
export { DocsHeadline, getHeadlineText };
