import React from 'react'
import { StyledMain } from './styled'
import { MainProps } from './typings'
import { toMainClassName } from './deps'

class Main extends React.PureComponent<MainProps> {
  render() {
    const { className, children } = this.props
    const classNamed = toMainClassName(className)

    return (
      <StyledMain
        className={classNamed}
        id={'main'}
        // we only want to focus this element via js?
        // or do we want to put hidden element inside of here?
        // @michael
        tabIndex="-1"
      >
        {children}
      </StyledMain>
    )
  }
}

export { Main }
export default Main