import {
  isReactNodeWithChildren
} from "./chunk-2NT4RAQ3.js";
import {
  StyledHeadline
} from "./chunk-3FHPHO5S.js";

// src/components/documentation/DocsHeadline.tsx
import React from "react";
import { jsx } from "@emotion/react/jsx-runtime";
var 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: " + (element == null ? void 0 : element.toString())
  );
};
var getHeaderId = (element) => {
  if (React.isValidElement(element) && (element == null ? void 0 : 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: " + (element == null ? void 0 : element.toString())
  );
};
var toKebabCase = (str) => {
  return str.replaceAll(" ", "-").toLowerCase();
};
var DocsHeadline = ({
  children,
  color,
  size = "Medium",
  heading = "h1",
  onClick,
  textAlign,
  underline = false
}) => {
  const id = toKebabCase(getHeaderId(children));
  return /* @__PURE__ */ jsx(
    StyledHeadline,
    {
      as: heading,
      id,
      size,
      colorProp: color,
      displayProp: "block",
      hideOverflow: false,
      textAlign,
      onClick,
      underline,
      block: true,
      children
    }
  );
};

export {
  getHeadlineText,
  DocsHeadline
};
