import React from 'react'
import { wording } from 'src/words'
import styles from './styled'
import { SkipNavProps } from './typings'
import { classes } from './fixture'

// @todo !!!
const Portal = React.Fragment

@styles
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}>
        <a href={to} className={classes.skipnav} role="navigation">
          {wording.skipToMainContent}
        </a>
      </Portal>
    )
  }
}

export { SkipNav }
export default SkipNav