import React from 'react';
import styled from 'styled-components';


type Props = {
    /** A human-readable string that a screen reader will read out to its user */
    text: String,
  }

const Text = styled.span`
    position: absolute !important; */
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
`;

/**
 * A component that is invisible in the ui but that can be read by screenreaders
 * Useful for helping to add text to icon-only buttons etc
 * This should be placed inside the component you want to add a descriptor to, for example:
 *
 * `<a href="/">Here is a link <ScreenReaderText text="here is the hidden component"/></a>`
 */
const ScreenReaderText = ({ text } : Props) => (
  <Text>
    {text}
  </Text>
);

export default ScreenReaderText;