import type { JSX } from "solid-js";
import { splitProps } from "solid-js";

export interface VisuallyHiddenProps extends JSX.HTMLAttributes<HTMLSpanElement> {
  children?: JSX.Element;
}

const visuallyHiddenStyle: JSX.CSSProperties = {
  position: "absolute",
  border: "0",
  width: "1px",
  height: "1px",
  padding: "0",
  margin: "-1px",
  overflow: "hidden",
  clip: "rect(0, 0, 0, 0)",
  "white-space": "nowrap",
  "word-wrap": "normal",
};

/**
 * Renders content visually hidden but accessible to screen readers.
 */
export function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children", "style"]);
  return (
    <span
      style={{ ...visuallyHiddenStyle, ...(local.style as JSX.CSSProperties | undefined) }}
      {...rest}
    >
      {local.children}
    </span>
  );
}
