import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import BananaSlug from 'github-slugger';
import { Children, useMemo } from 'react';
import { X } from './_X.js';
// TODO: use context to simplify the usage of `slugger` and `uid`
export const HeadingTitle = ({ slug, slugger, uid, level, children, }) => {
    const HeadingComponents = useMemo(() => {
        return [null, X.h1, X.h2, X.h3, X.h4, X.h5, X.h6];
    }, []);
    const HeadingComponent = HeadingComponents[level];
    const slugFromChildren = useMemo(() => 
    // eslint-disable-next-line @eslint-react/no-children-to-array
    Children.toArray(children)
        .filter((it) => typeof it === 'string')
        .join(''), [children]);
    const id = useMemo(() => [uid, slug || slugger?.slug(slugFromChildren)]
        .filter(Boolean)
        .join('-') || undefined, [uid, slug, slugger, slugFromChildren]);
    return (_jsxs(HeadingComponent, { id: id, children: [children, _jsx(X.a, { className: "header-anchor", href: `#${id}`, "aria-hidden": true, children: "#" })] }));
};
