import { jsx as e, jsxs as d } from "react/jsx-runtime";
import P from "../../node_modules/.pnpm/@sindresorhus_slugify@2.2.1/node_modules/@sindresorhus/slugify/index.js";
import { useRef as R, useState as _, useCallback as j, useEffect as u } from "react";
import { LinkIcon as H } from "../../icons/index.js";
import { cn as k } from "../../utils/cn.js";
import { copyToClipboard as O } from "../../utils/copy-to-clipboard.js";
import { InfoPill as c, RequiredPill as $, DeprecatedPill as S } from "./pills.js";
const F = ({
  name: o,
  type: m,
  location: p,
  required: b,
  deprecated: x,
  default: a,
  id: v,
  pre: s,
  post: l,
  onMount: n,
  navigateToHeaderAriaLabel: y,
  defaultLabel: w,
  requiredLabel: N,
  deprecatedLabel: z
}) => {
  const f = R(null), [C, I] = _(!1), i = v ?? P(o ?? "", { decamelize: !0 }), h = j(() => {
    i && (O(`${window.location.href.split("#")[0]}#${i}`), window.location.hash = i);
  }, [i]);
  return u(() => {
    const r = f.current;
    if (!r)
      return;
    const t = () => {
      const L = (r == null ? void 0 : r.offsetHeight) ?? 0;
      I(L > 28);
    };
    t();
    const g = new ResizeObserver(t);
    return g.observe(r), () => {
      g.unobserve(r);
    };
  }, []), u(() => {
    n == null || n();
  }, [n]), o == null ? null : /* @__PURE__ */ e(
    "div",
    {
      className: k(
        "group/param-head param-head relative flex break-all font-mono text-sm"
      ),
      id: i,
      children: /* @__PURE__ */ e("div", { className: "mr-5 flex flex-1 flex-col content-start py-0.5", children: /* @__PURE__ */ d("div", { className: "flex flex-wrap items-center gap-2", children: [
        i && /* @__PURE__ */ e("div", { className: "absolute -top-1.5 -left-9", children: /* @__PURE__ */ d(
          "a",
          {
            "aria-label": y,
            className: "group/link flex items-center border-0 py-2 opacity-0 focus:opacity-100 focus:outline-0 group-hover/param-head:opacity-100",
            href: `#${i}`,
            onClick: h,
            children: [
              "​",
              /* @__PURE__ */ e("div", { className: "flex size-6 items-center justify-center rounded-md bg-white text-stone-400 shadow-sm ring-1 ring-stone-400/30 hover:ring-stone-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-stone-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150", children: /* @__PURE__ */ e(H, {}) })
            ]
          }
        ) }),
        s == null ? void 0 : s.map((r, t) => /* @__PURE__ */ e(
          "div",
          {
            className: "rounded-md bg-stone-100/50 px-2 py-0.5 text-stone-600 dark:bg-white/5 dark:text-stone-200",
            "data-component-part": "field-meta-pre",
            children: r
          },
          t
        )),
        /* @__PURE__ */ e(
          "div",
          {
            className: "overflow-wrap-anywhere cursor-pointer font-semibold text-primary dark:text-primary-light",
            "data-component-part": "field-name",
            onClick: h,
            children: o
          }
        ),
        /* @__PURE__ */ d(
          "div",
          {
            className: k(
              "inline items-center gap-2 font-medium text-xs [&_div]:mr-2 [&_div]:inline",
              C ? "[&_div]:leading-6" : "[&_div]:leading-5"
            ),
            "data-component-part": "field-meta",
            ref: f,
            children: [
              m && /* @__PURE__ */ e(c, { children: m }),
              p && /* @__PURE__ */ e(c, { children: p }),
              a != null && /* @__PURE__ */ e(c, { prefix: w, children: typeof a == "string" ? (
                // biome-ignore lint/style/noNestedTernary: TODO
                a === "" ? '""' : a
              ) : JSON.stringify(a) }),
              b && /* @__PURE__ */ e($, { label: N }),
              x && /* @__PURE__ */ e(S, { label: z }),
              l == null ? void 0 : l.map((r, t) => /* @__PURE__ */ e(
                "div",
                {
                  className: "rounded-md bg-stone-100/50 px-2 py-0.5 text-stone-600 dark:bg-white/5 dark:text-stone-200",
                  "data-component-part": "field-meta-post",
                  children: r
                },
                t
              ))
            ]
          }
        )
      ] }) })
    },
    i
  );
};
export {
  F as ParamHead
};
