import type { AriaRole, JSXElementConstructor, ReactNode } from "react";

export interface VisuallyHiddenProps {
  /** The content to visually hide. */
  children?: ReactNode;
  id?: string;
  role?: AriaRole;

  className?: string;

  /**
   * The element type for the container. Defaults to 'div'
   */
  elementType?: string | JSXElementConstructor<any>;
}

export function VisuallyHidden(props: VisuallyHiddenProps) {
  const {
    className,
    children,
    elementType: Component = "div",
    ...otherProps
  } = props;

  return (
    <Component
      className={className}
      style={{
        border: 0,
        clip: "rect(0 0 0 0)",
        clipPath: "inset(50%)",
        height: "1px",
        margin: "-1px",
        overflow: "hidden",
        padding: 0,
        position: "absolute",
        width: "1px",
        whiteSpace: "nowrap",
      }}
      {...otherProps}
    >
      {children}
    </Component>
  );
}
