import React from 'react'
import { string, oneOfType, object, array } from 'prop-types'
import classnames from 'classnames'

/**
 * <li> Helper component for Navigation
 */
const NavListItem = ({ children, className, automation }) => {
  const listItemStyle = classnames('relative', className)
  return (
    <li className={listItemStyle} data-automation={automation}>
      {children}
    </li>
  )
}

NavListItem.propTypes = {
  /** Extra classnames */
  className: oneOfType([string, object, array]),
  /** Label for data-automation tag */
  automation: string
}

NavListItem.defaultProps = {
  className: '',
  automation: ''
}

NavListItem.displayName = 'NavListItem'

export default NavListItem