import { cn } from "../../utils/cn.mjs";
import { jsx } from "react/jsx-runtime";

//#region src/components/Headers/index.tsx
const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
/**
* Styled H1 Component
*
* Primary heading component for page titles and main content headers.
* Does not include clickable anchor functionality.
*/
const StyledH1 = ({ className,...props }) => /* @__PURE__ */ jsx("h1", {
	className: cn("mt-5 font-bold text-2xl", className),
	...props
});
/**
* Styled H2 Component
*
* Secondary heading component with anchor link functionality when wrapped.
* Used for major section headers in content.
*/
const StyledH2 = ({ className,...props }) => /* @__PURE__ */ jsx("h2", {
	className: cn("mt-16 mb-2 font-bold text-2xl", styledHeading, className),
	...props
});
/**
* Styled H3 Component
*
* Tertiary heading component with anchor link functionality when wrapped.
* Used for subsection headers in content.
*/
const StyledH3 = ({ className,...props }) => /* @__PURE__ */ jsx("h3", {
	className: cn("mt-5 mb-2 font-bold text-xl", styledHeading, className),
	...props
});
/**
* Styled H4 Component
*
* Quaternary heading component with anchor link functionality when wrapped.
* Used for minor section headers in content.
*/
const StyledH4 = ({ className,...props }) => /* @__PURE__ */ jsx("h4", {
	className: cn("mt-3 font-bold text-lg", styledHeading, className),
	...props
});
/**
* Styled H5 Component
*
* Fifth-level heading component with anchor link functionality when wrapped.
* Used for detailed subsection headers in content.
*/
const StyledH5 = ({ className,...props }) => /* @__PURE__ */ jsx("h5", {
	className: cn("mt-3 font-bold text-base", styledHeading, className),
	...props
});
const StyledH6 = ({ className,...props }) => /* @__PURE__ */ jsx("h6", {
	className: cn("mt-3 ml-3 font-bold text-base", styledHeading, className),
	...props
});
/**
* Utility function to generate URL-friendly ID from heading text
* @param children - The heading text content
* @returns URL-friendly string for use as element ID
*/
const getId = (children) => String(children).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").toLowerCase();
/**
* Utility function to smoothly scroll to an element by ID
* @param id - The element ID to scroll to
*/
const scrollToHash = (id) => {
	const y = (document.getElementById(id)?.getBoundingClientRect()?.top ?? 0) + window.scrollY - 150;
	window.scrollTo({
		top: y,
		behavior: "smooth"
	});
};
/**
* Utility function to detect if the pseudo-element (#) after the heading was clicked
* @param parentElem - The heading element
* @param e - Mouse event
* @returns Whether the after pseudo-element was clicked
*/
const afterClick = (parentElem, e) => {
	const parentLeft = parentElem.getBoundingClientRect().left;
	const parentTop = parentElem.getBoundingClientRect().top;
	const after = window.getComputedStyle(parentElem, ":after");
	const afterStart = parentLeft + parseInt(after.getPropertyValue("left"), 10);
	const afterEnd = afterStart + parseInt(after.width, 10);
	const afterYStart = parentTop + parseInt(after.getPropertyValue("top"), 10);
	const afterYEnd = afterYStart + parseInt(after.height, 10);
	const mouseX = e.clientX;
	const mouseY = e.clientY;
	return mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd;
};
/**
* HeadingWrapper Component
*
* Internal wrapper component that adds anchor link functionality to headings.
* Handles ID generation, click-to-copy URL behavior, and smooth scrolling.
*
* @component
* @accessibility
* - Generates URL-friendly IDs for deep linking
* - Provides accessible labels for anchor link functionality
* - Maintains proper heading hierarchy and semantics
* - Supports keyboard navigation and screen readers
*/
const HeadingWrapper = ({ H, children, className, isClickable,...props }) => {
	const id = typeof children === "string" ? getId(children) : void 0;
	const onClick = (e) => {
		const { id: id$1 } = e.currentTarget;
		if (afterClick(e.currentTarget, e) && typeof id$1 === "string") {
			const url = `${window.location.href.split("#")[0]}#${id$1}`;
			navigator.clipboard.writeText(url);
			scrollToHash(id$1);
		}
	};
	return /* @__PURE__ */ jsx(H, {
		id,
		onClick: isClickable ? onClick : void 0,
		"aria-label": isClickable ? `Click to scroll to section ${id} and copy the link to the clipboard` : void 0,
		className: cn(isClickable && styledAfter, className),
		...props,
		children
	});
};
/**
* H1 Component
*
* Primary page heading component. Does not include clickable anchor functionality
* as it's typically used for main page titles rather than content sections.
*
* @example
* ```tsx
* <H1>Welcome to Our Website</H1>
* <H1 className="text-blue-600">Custom Styled Title</H1>
* ```
*/
const H1 = ({ isClickable: _,...props }) => /* @__PURE__ */ jsx(StyledH1, { ...props });
/**
* H2 Component
*
* Secondary heading component with optional anchor link functionality.
* Perfect for major section headers with deep-linking capabilities.
*
* @example
* ```tsx
* <H2>Getting Started</H2>
* <H2 isClickable>API Reference</H2>
* ```
*/
const H2 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
	H: StyledH2,
	isClickable,
	...props
});
/**
* H3 Component
*
* Tertiary heading component with optional anchor link functionality.
* Used for subsection headers within major sections.
*
* @example
* ```tsx
* <H3>Configuration Options</H3>
* <H3 isClickable>Advanced Settings</H3>
* ```
*/
const H3 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
	H: StyledH3,
	isClickable,
	...props
});
/**
* H4 Component
*
* Fourth-level heading component with optional anchor link functionality.
* Used for detailed section organization.
*
* @example
* ```tsx
* <H4>Implementation Details</H4>
* <H4 isClickable>Code Examples</H4>
* ```
*/
const H4 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
	H: StyledH4,
	isClickable,
	...props
});
/**
* H5 Component
*
* Fifth-level heading component with optional anchor link functionality.
* Used for fine-grained content organization.
*
* @example
* ```tsx
* <H5>Technical Notes</H5>
* <H5 isClickable>Best Practices</H5>
* ```
*/
const H5 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
	H: StyledH5,
	isClickable,
	...props
});
const H6 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
	H: StyledH6,
	isClickable,
	...props
});

//#endregion
export { H1, H2, H3, H4, H5, H6 };
//# sourceMappingURL=index.mjs.map