import React from 'react'
import { wording } from 'src/words'
import { SkipNavAnchorLink } from './styled'
import { SkipNavProps } from './typings'

/**
 * @todo @see README.md
 */
const Portal = (props: any) => props.children

class SkipNav extends React.PureComponent<SkipNavProps> {
  static defaultProps = {
    to: 'main',
    identifier: 'skipnav',
  }
  render() {
    const identifier = this.props.identifier
    const to = '#' + this.props.to

    // tabIndex={}
    return (
      <Portal id={identifier}>
        <SkipNavAnchorLink href={to}>
          {wording.skipToMainContent}
        </SkipNavAnchorLink>
      </Portal>
    )
  }
}

export { SkipNav }
export default SkipNav