import type { PropsWithChildren, Ref } from "react";

import { memo } from "react";

// Inspired by
// https://github.com/radix-ui/primitives/blob/main/packages/react/visually-hidden/src/VisuallyHidden.tsx

export interface VisuallyHiddenProps extends PropsWithChildren {
	ref?: Ref<HTMLSpanElement>;
}

export default memo(function VisuallyHidden({
	ref,
	children,
}: VisuallyHiddenProps) {
	return (
		<span
			ref={ref}
			style={{
				// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
				position: "absolute",
				border: 0,
				width: 1,
				height: 1,
				padding: 0,
				margin: -1,
				overflow: "hidden",
				clip: "rect(0, 0, 0, 0)",
				whiteSpace: "nowrap",
				wordWrap: "normal",
			}}
		>
			{children}
		</span>
	);
});