import PropTypes from 'prop-types';
import classes from './styles.module.scss';

/**
 * A utility component that hides its children visually, but keeps them
 * available to screenreaders.
 */
const SrOnly = function SrOnly(props) {
  const {
    children,
    as: Tag
  } = props;
  return <Tag className={classes.container}>
      {children}
    </Tag>;
};
SrOnly.defaultProps = {
  children: 'undefined',
  as: 'span'
};
SrOnly.propTypes = {
  /**
   * The children to render. These will be hidden visually, but available to
   * screenreaders.
   */
  children: PropTypes.node,
  /**
   * The HTML node or custom component to render as the container. Custom
   * components must accept and use the `className` prop.
   */
  as: PropTypes.elementType
};
export default SrOnly;