import React from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { bemHOF } from "../../utilities";

const cn = bemHOF("VisuallyHidden");

/**
 * @deprecated use the “visually-hidden” classname instead
 */
export const VisuallyHidden: React.FunctionComponent<BoxProps> = React.forwardRef<
  HTMLDivElement,
  BoxProps
>(({ className, ...rest }, forwardedRef) => (
  <Box ref={forwardedRef} className={classNames(cn(), className)} {...rest} />
));